Question

我希望有一个搜索栏可以过滤我尝试执行的结果，但是它不起作用。当我在寻找东西时，什么也没有发生，没有错误，所以我错了，但是我不知道是什么，我是打字机的新手，我寻求帮助。预先感谢

Home.html
---------
<ion-searchbar (ionInput)="filterItems()"
                 [showCancelButton]="shouldShowCancel" (ionCancel)="onCancel($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="itemClick(item.id)">
      <h1>{{item.id}}</h1>
      {{item.title}}
    </ion-item>
  </ion-list>
Home.ts
-------
export class HomePage {

  public items:any;


  constructor(public http:HttpClient) {
    this.loadData();
  }
  searchTerm: string ;
  loadData() {
    let data:Observable<any>;
    data = this.http.get('https://jsonplaceholder.typicode.com/photos');
    data.subscribe(result => { 

      this.items = result;
      this.filterItems= this.items;
    })
  }

filterItems(ev:any){ 
  this.loadData();
  const val = ev.target.value;
  this.filterItems = this.items.filter(item =>  
    {
      item.titre.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
    })
}

itemClick(itemid:number){
  alert(itemid);
}

}

Answer 1

因此您可以在HTML中完成

<ion-searchbar [formControl]="searchTerm"></ion-searchbar>

然后在.ts文件中声明构造函数之前

public searchTerm: FormControl;

然后在ngOnInit内部，具有此功能，可以监听用户输入并等待一段时间才能过滤

this.searchTerm.valueChanges
.pipe(debounceTime(700))
.subscribe(search => {
  this.items = this.filterItems(search);
});

然后是过滤器的最终方法

filterItems(search) {
 this.items = this.filterItems;
 return this.items.filter(item => {
   return item.titre.toLowerCase().indexOf(search.toLowerCase()) > -1 
 });
}

我希望这对您有帮助

如何使用ionic从API json过滤数据？

1 个答案: