Pipe .filter не функция в Firestore возвращать данные - PullRequest
0 голосов
/ 04 ноября 2018

я использую 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();
  }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...