带有 JSON 数据的搜索栏 ionic 3

Question

我想使用带有 JSON 文件的搜索栏。

所以我尝试在这个问题上使用方法：Searchbar with filter from JSON data with Ionic 3

但这不起作用

这是我的 ts：

export class RechercheAidePage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) {
    //this.initializeItems();
    this.loadData();
  }

    searchTerm: string ;
    filterItems:any;
    items: any;



   loadData(){
    let data:Observable<any>;
    data = this.http.get("assets/donneesJSON.json");
    data.subscribe(result => {
          this.items = result;
          this.filterItems= this.items;
   })

   }

  initializeItems() {
    this.items= this.items;
  }

  getItems(ev:any){
    this.initializeItems();
    const val = ev.target.value;
  }

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

这是我的 JSON 示例：

[{
        "id" : 6,
        "titre": "Electrocution",
        "categorie": "retourexp",
        "contenu": "Mon chien à mordu un cable derrière ma TV. Il est mort électrocuté. Je vous conseil donc de ne pas regarder la TV",
        "reponse1": "Bonne idée Michel !",
        "reponse2": "Merci pour ce retour très touchant."
    },
    {
        "id" : 7,
        "titre": "Le moribond",
        "categorie": "retourexp",
        "contenu": "Adieu l'Émile, je t'aimais bien\nAdieu l'Émile, je t'aimais bien, tu sais\nOn a chanté les mêmes vins\nOn a chanté les mêmes filles\nOn a chanté les mêmes chagrins\nAdieu l'Émile, je vais mourir\nC'est dur de mourir au printemps, tu sais\nMais je pars aux fleurs la paix dans l'âme\nCar vu que tu es bon comme du pain blanc\nJe sais que tu prendras soin de ma femme\nJe veux qu'on rie, je veux qu'on danse\nJe veux qu'on s'amuse comme des fous\nJe veux qu'on rie, je veux qu'on danse\nQuand c'est qu'on me mettra dans le trou\n",
        "reponse1": "Adieu Grand Jacques"
    }
]

这是我的html：

<ion-grid>

<ion-row>
  <ion-col col-12><h2>Question</h2></ion-col>
  <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="filterItems()"></ion-searchbar>
</ion-row>

<br>

<ion-row>
    <ion-col col-12><h2>Sujets similaires</h2></ion-col>
    <ion-col col-12>
        <ion-list>
          <!--*ngIf="item.id>=4"-->
            <ng-container *ngFor="let item of filterItems" > 
                <button ion-item (click)="itemSelected(item)">
                    {{item.titre}}
                </button>
            </ng-container>     
        </ion-list>
    </ion-col>
</ion-row>
</ion-grid>

这是控制台中显示的错误（我不明白）： 错误：找不到类型为“function”的不同支持对象“function (ev) {.......}”。 NgFor 只支持绑定到 Arrays 等 Iterables。

你能帮帮我吗？ :)

Answer 1

您正在尝试在函数 filterItems 上运行 ngFor。

尝试为您的函数和变量使用不同的名称。 filterItems 用作变量和函数

loadData(){
 let data:Observable<any>;
 data = this.http.get("assets/donneesJSON.json");
 data.subscribe(result => {
       this.items = result;
       this.filterItems= this.items; <---- VARIABLE
 })

---

功能：

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

Answer 2

这样定义：

`filterItems:any=[];`

并将this.filterItems 替换为this.filterItems[]