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>

这是控制台中显示的错误（我不理解）： 错误：找不到类型为“功能”的其他支持对象“功能（ev）{.......}”。 NgFor仅支持绑定到数组等Iterable。

请你能帮我吗？：）

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[]

带有JSON数据Ionic 3的Searchbar

2 个答案: