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

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 
 });
}

我希望这有帮助