Ionic 3 过滤器列表答案

【问题标题】：Ionic 3 Filter ListIonic 3 过滤器列表
【发布时间】：2018-11-25 02:20:23
【问题描述】：

我被困在这里

当我单击列表时，没有任何反应，控制台也没有显示任何内容。我使用搜索过滤器打字稿进入列表过滤器。我不擅长 ionic 尤其是 angular js。

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

【问题讨论】：

标签： typescript ionic3

【解决方案1】：

我认为您需要为此使用 ngModel 数据绑定，如documentation中所述

<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)”>

【讨论】：

[Angular] 解析器错误：在 [getYear($event)=$event] 中的第 16 列出现意外的标记“=”
我明白了。我用这个：

【解决方案2】：

你应该使用(ionChange)而不是(click)，比如

<ion-select (ionChange)="getYear($event)">

或者在你的情况下可能是filterService.getYear($event)，虽然我不是从模板访问服务的忠实粉丝。

getYear 函数将使用所选项目的value 调用，即“第一”、“第二”等，因此理想情况下应该有一个参数，而不是 2。

例如Code/Preview

【讨论】：

谢谢，但我认为这个搜索过滤器的打字稿不适用于列表过滤器。