Панель поиска с данными JSON ionic 3

Question

Я хочу использовать панель поиска с файлом JSON.

Поэтому я попытался использовать методы на эту тему: Панель поиска с фильтром данных JSON с помощью 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>

Это ошибка, отображаемая в консоли (и я ее не понимаю): Ошибка: невозможно найти отличающийся вспомогательный объект 'функция (ev) {.......} типа «функция».NgFor поддерживает только привязку к итерациям, таким как массивы.

Пожалуйста, вы можете мне помочь?:)

Answer 1

определите так:

`filterItems:any=[];`

и замените this.filterItems на this.filterItems[]

Answer 2

Вы пытаетесь запустить ngFor для функции filterItems.

Попробуйте использовать разные имена для вашей функции и переменных.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;
    })
 }