Список фильтров Ionic 3

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

Я думаю, вам нужно использовать привязку данных 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.

Пример Код / Предварительный просмотр