Question

我被困在这里

当我单击列表时，什么也没有发生，并且控制台什么也不显示。我将搜索过滤器打字稿用于列表过滤器。我不太擅长使用离子技术，尤其是有角度的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>

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

Answer 1

您应该使用(ionChange)而不是(click)，例如

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

或者您可能是filterService.getYear($event)，尽管我不是从模板访问服务的忠实粉丝。

getYear函数将与所选项目的value一起调用，即“ first”，“ second”等，因此理想情况下应具有单个参数，而不是2。

示例Code / Preview

Answer 2

我认为您需要为此使用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)”>

Ionic 3过滤器列表

2 个答案: