时间戳

首页 > 解决方案 > 如何使用离子过滤来自 API json 的数据？

ionic-framework - 如何使用离子过滤来自 API json 的数据？

问题描述

我想要一个搜索栏来过滤我尝试这样做但它不起作用的结果。当我在寻找东西时，什么都没有发生，没有错误，所以我错了，但我不知道是什么，我是打字稿的新手，我寻求帮助。提前致谢

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

}

标签： ionic-framework

解决方案

所以你可以在你的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 
 });
}

我希望这有帮助

推荐阅读