я использую ionic 3 с Firestore
back-end, использую трубу-фильтр с * ngFor, но при вводе в поле поиска я получаю ошибку items.filter is not a function
Моя items
Поля таблицы базы данных - заголовок, описание.
Код моей трубы
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if(!items) return [];
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
return it.toLowerCase().includes(searchText);
});
}
}
Мой HTML:
<ion-header>
<ion-navbar>
<ion-title>
Items List
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-searchbar [(ngModel)]="searchText" ></ion-searchbar>
<ion-list>
<button ion-item *ngFor="let item1 of ItemsListRef$ | filter : searchText | async" (click)="gotoviewpage(item1)" icon-start>
<ion-icon item-start></ion-icon>
{{item1.title}}
</button>
</ion-list>
</ion-content>
Файл TS
import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ItemviewPage } from '../Itemview/Itemview';
import { Item } from '../../models/Item.interface';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit {
Item = {} as Item;
ItemCol: AngularFirestoreCollection<Item>;
searchText;
ItemListRef$: Observable<Item[]>;
constructor(public navCtrl: NavController, private db: AngularFirestore) {
}
ngOnInit(){
this.ItemCol = this.db.collection('items', ref => {
return ref.orderBy('title', 'asc');
});
this.ItemListRef$ = this.ItemCol.valueChanges();
}
}