Ionic 3过滤器列表

Question

我被卡住了

当我点击列表时，什么都没有发生，控制台也没有显示任何内容。我使用搜索过滤器typescript到列表过滤器。我不擅长离子特别是棱角分明的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;
}
});
}

Answer 1

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

Answer 2

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

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

或者在您的情况下可能是filterService.getYear($event)，尽管我不太喜欢从模板访问服务。

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

示例代码/预览