tip： 只要進行數(shù)據(jù)綁定行贪，一定要先檢查是否在app_module.ts中進行過formsModule的數(shù)據(jù)引入，如果沒有進行引入才漆，在數(shù)據(jù)綁定的時候會出現(xiàn)報錯
例一：京東搜索，歷史記錄
html:
<div>
<input type="text" [(ngModel)]="keyword">
<button (click)="dosearch()">搜索</button>
<ul>
<li *ngFor="let item of historyList ; let key= index">{{item}}
<button (click)="deletehistory()">x</button>
</li>
</ul>
</div>
ts中：
public keyword:string="";
public historyList:any[]=[];
dosearch(){
console.log(this.keyword);
console.log(this.historyList.indexOf(this.keyword));
if(this.historyList.indexOf(this.keyword)==-1){
if(this.keyword !=""){
this.historyList.push(this.keyword);
this.keyword="";
}else{
console.log("請輸入您要搜索的物品");
}
}else{
console.log("您搜索過此物品");
}
}
deletehistory(key){
this.historyList.splice(key,1);
}
解析：
console.log(this.keyword);獲取輸入框中的值。
this.historyList.indexOf(this.keyword)==-1 歷史列表中的值是否等于-1
if(this.historyList.indexOf(this.keyword)==-1){ 判斷歷史列表中的值是否為-1
如果是-1則褥影，
if(this.keyword !=""){
· 在判斷輸入框中的值是否為空，不為空咏雌，將輸入框中的值賦值給歷史列表
this.historyList.push(this.keyword);
this.keyword="";
如果為空凡怎，則進行提示
console.log("請輸入您要搜索的物品");
如果不為-1,給出提示
console.log("您搜索過此物品");
刪除數(shù)據(jù)使用splice()屬性；
例二：搜索過的記錄可以互相轉(zhuǎn)換（備忘事件和過期事件）
html:中
<div>
<input type="text" [(ngModel)]="keyword" (keyup)="keyUp($event)">
<h3>待辦事項</h3>
<ul>
<li *ngFor="let item of todolist; let key=index" [hidden]="item.status==1">
<input type="checkbox" [(ngModel)]="item.status">{{item.title}}
<button type="button" (click)="deletedata()">x</button>
</li>
</ul>
<h3>已辦事項</h3>
<ul>
<li *ngFor="let item of todolist; let key=index" [hidden]="item.status==0">
<input type="checkbox" [(ngModel)]="item.status">{{item.title}}
<button type="button" (click)="deletedata()">x</button>
</li>
</ul>
</div>
ts:中
public keyword:string="";
public todolist:any[]=[];
keyUp(e){
if(e.keyCode == 13){
console.log(this.keyword);
// 先去重
if(!this.todoListHasKeyWord(this.todolist,this.keyword)){
this.todolist.push({title:this.keyword,status:0});
this.keyword="";
}else{
console.log("您已經(jīng)搜索過此物品");
}
}
}
// 封裝去重寫法
todoListHasKeyWord(todolist:any,keyword:any){
if(!keyword) return false;
for(var i=0;i<todolist.length;i++){
if(todolist[i].title == keyword){
return true;
}
}
return false;
}
deletedata(key){
this.todolist.splice(key,1);
}
解析：
傳入todolist（歷史記錄列表）赊抖，keyword（輸入框中的值）這兩個值進入自定義的函數(shù)中统倒，在接下來進行判斷，因為todolist的title就是輸入框中的值也就是驗證
todolist.title ==keyword;在todolist(歷史列表中)進行逐個排查 for( var i= 0;i<todolist.length;i++){todolist[i].title==keyword}如果為真氛雪，則就
返回true（真）房匆，if(!keyword) return false;判斷里面是否存在和keyword相同的值，不存在返回false;
