1 新建angular 项目
cmd 命令行模式下到项目路径执行: ng new angularName --skip-install
导入模块 : cnpm install
2 新建组件
ng g component components/search
3 跟组件中引入组件
4 表单模块引入
双向绑定需要在app.module.ts中加入:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SearchComponent } from './components/search/search.component';
import {FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
SearchComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5 编辑html
删除时,可以在调用删除方法传入元素在array的index,达到删除效果
<input type="text" [(ngModel)]="inputString"> <button (click)="doSearch()">搜索</button>
<hr>
搜索历史:<br>
<li *ngFor="let item of history;let key =index;">{{item}} <button (click)="doDelete(key)">X</button></li>
<hr>
6编写ts
数组的splice()方法
this.history.splice(index,1);//表示删除下标为index处的元素
this.history.splice(0,0,this.inputString);//表示在0处添加inputString
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
inputString:''
history:any=[
]
doSearch(){
if(this.inputString==null){
return;
}
let index = this.history.indexOf(this.inputString);
if(index>=0){
this.history.splice(index,1);
}
this.history.splice(0,0,this.inputString);
}
doDelete(key){
console.log(key);
this.history.splice(key,1);
}
}
7效果
点击搜索之后,展示历史关键字,并且可以删除。
另外一个类似组件:
功能是:输入需要做的任务,加入到准备执行的列表,能删除,勾选之后,进入已完成清单。
html:
Add to do:<input type="text" [(ngModel)]="inputString" (keyup)="doSearch($event)">
<br>
To Do List:<br>
<div class="searchHistory">
<!--//根据item.doneFlag的值判断是否是准备做的事情,为0则是准备做的事情-->
<li *ngFor="let item of toDoList;let key =index;" [hidden]="item.doneFlag==1">
<input type="checkbox" [(ngModel)]="item.doneFlag"/>{{item.title}}
<button (click)="doDelete(key)">X</button>
</li>
</div>
Done List:
<div class="searchHistory">
<!--//根据item.doneFlag的值判断是否是准备做的事情,为0则是准备做的事情-->
<li *ngFor="let item of toDoList;let key =index;" [hidden]="item.doneFlag==0">
<input type="checkbox" [(ngModel)]="item.doneFlag"/>{{item.title}}
<button (click)="doDelete(key)">X</button>
</li>
</div>
ts代码:
import { Component, OnInit } from '@angular/core';
import { checkServerIdentity } from 'tls';
@Component({
selector: 'app-to-do-list',
templateUrl: './to-do-list.component.html',
styleUrls: ['./to-do-list.component.css']
})
export class ToDoListComponent implements OnInit {
constructor() { }
inputString:string=''
toDoList=[];
ngOnInit(): void {
}
//键盘事件,判断当回车键弹起时
//是否加入任务清单
//checkbox选择之后,在已完成列表展示,
doSearch(e){
if(this.inputString==null){
return;
}
console.log(e.keyCode);
if(e.keyCode==13){
if(!this.check()){
this.toDoList.push({title:this.inputString,doneFlag:0});
this.inputString='';
}
}
}
doDelete(e){
console.log(e);
this.toDoList.splice(e,1);
}
check(){
let flag = false;
this.toDoList.forEach(element => {
console.log("title--"+element.title)
console.log("inputString--"+this.inputString)
if(element.title==this.inputString){
flag= true;
}
});
return flag;
}
}