首页 > 解决方案 > Ionic 3 过滤器列表

问题描述

我被困在这里

当我单击列表时,没有任何反应,控制台也没有显示任何内容。我使用搜索过滤器打字稿进入列表过滤器。我不擅长离子特别是角度js。

流行的.html:

<ion-item>
  <ion-select  (click)="this.filterService.getYear($event)" >
    <ion-option value="first">1st Year</ion-option>
    <ion-option value="second">2nd Year</ion-option>
    <ion-option value="third">3rd Year</ion-option>
    <ion-option valur="fourth">4th Year</ion-option>
    <ion-option value="fifth">5th Year</ion-option>
  </ion-select>
</ion-item>

过滤器.ts:

getYear(searchbar, item)
{
    let nav = this.app.getActiveNav();

    console.log(this.posts);

    this.keyboard.close();

    this.initializeItems();

    var q = searchbar.srcElement.value;
    if (!q) {
        return;
    }

    this.filters = this.posts.filter((value) => {

        console.log(value);

        if (value.data().year && q) {
            if (value.data().year.toLowerCase().indexOf(q.toLowerCase()) > -1) {
                return true;
            }
        return false;
        }
    });
}

标签: typescriptionic3

解决方案


我认为您需要为此使用 ngModel 数据绑定,如文档中所述

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

对于您的示例,这将更改为

<ion-select [(ngModel)]=“filterService.getYear($event)”&gt;

推荐阅读