列出搜索過的數據(相似京東頂部搜索框)

tip： 只要進行數據綁定，必定要先檢查是否在app_module.ts中進行過formsModule的數據引入，若是沒有進行引入，在數據綁定的時候會出現報錯

例一：京東搜索，歷史記錄

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("您搜索過此物品");

　　　　

刪除數據使用splice()屬性；

---

---

例二：搜索過的記錄能夠互相轉換（備忘事件和過時事件）

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("您已經搜索過此物品");

　　　　　　}

　　　　}

　　　}

　　// 封裝去重寫法

　　　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（輸入框中的值）這兩個值進入自定義的函數中，在接下來進行判斷，由於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;