Фильтр элементов массива Ionic 3

Question

Я реализовал список массивов.Он заселен с пожарной базы.Я хочу просмотреть этот список.Когда страница загружается впервые, она не отображает ни одного элемента в списке.Но если я что-то наберу в поисковой строке, то это покажет элементы списка.Я попробовал ngZone, но это не сработало, здесь я дам вам полный исходный код.

ПРИМЕЧАНИЕ: после ввода чего-либо при поиске всегда отображаются элементы, но изначально пустые

HTML

<ion-content padding>    
    <ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl" (ionInput)="onSearchInput()"></ion-searchbar>

    <div *ngIf="searching" class="spinner-container">
        <ion-spinner></ion-spinner>
    </div>

    <ion-list>
        <ion-item *ngFor="let item of items">
            {{item.client_meeting_schedule_client_name}}
        </ion-item>
    </ion-list>
</ion-content>

DONE_TASK.ts

export class DoneTasksPage {

  searchTerm: string = '';
  searchControl: FormControl;
  items: any;
  searching: any = false;

  constructor(public navCtrl: NavController, public oDataListProvider: DataListProvider, private oNgZone: NgZone) {
    this.searchControl = new FormControl();
  }

  ionViewDidLoad() {
    this.setFilteredItems();
    this.searchControl.valueChanges.debounceTime(700).subscribe(search => {
      this.searching = false;
      this.setFilteredItems();
    });
  }

  onSearchInput() {
    this.searching = true;
  }

  setFilteredItems() {
    this.oNgZone.run(() => {
      this.items = this.oDataListProvider.filterItems(this.searchTerm);
    })
  }

}

DATA_LIST_PROVIDER

export class DataListProvider {


  items = [];
  public ClientSchedules: Array<any> = [];
  clientSchedulesRef: any;
  whereClause: string;

  constructor(private oAngularFireDatabase: AngularFireDatabase, private oNgZone: NgZone) {

    this.whereClause = "true_false_true_false";

    //Client schedule node refference
    this.clientSchedulesRef = this.oAngularFireDatabase.database.ref('/Client_meeting_schedule').orderByChild("client_meeting_schedule_valid_status").equalTo(this.whereClause);
    //Above sequence of equal IsActive true / IsDelete false / IsDone true / IsNotDone false

    this.clientSchedulesRef.on('value', client_Schedules_Snapshot => {
      this.oNgZone.run(() => {
        // Here we'll work with the list
        client_Schedules_Snapshot.forEach(clientsSheduleSnap => { 
          this.items.push(clientsSheduleSnap.val());
        });
      });
    });
  }

  filterItems(searchTerm) {
    return this.items.filter((item) => {
        return item.client_meeting_schedule_client_name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
  }

}

Answer 1

Выпуск

Данные не загружаются на месте, поскольку элементы недоступны в то время, когда элементы загружаются синхронно.Даже после загрузки данных мы уведомляем Angular о том, что данные доступны.

Fix

Так что давайте обработаем этот вызов Asynchronous с помощью Subject в провайдере данных.Он будет уведомлять Компонент всякий раз, когда элементы доступны.

import { Observable, Subject } from 'rxjs';

export class DataListProvider {

   //-- Observable ------
   private subject = new Subject<any>();

   sendItems(items) {
      this.subject.next(items);
   }

   getItems(): Observable<any> {
      return this.subject.asObservable();
  }
   //-- Observable ------ end

  items = [];
  public ClientSchedules: Array<any> = [];
  clientSchedulesRef: any;
  whereClause: string;

  constructor(private oAngularFireDatabase: AngularFireDatabase, private oNgZone: NgZone) {

    this.whereClause = "true_false_true_false";

    //Client schedule node refference
    this.clientSchedulesRef = this.oAngularFireDatabase.database.ref('/Client_meeting_schedule').orderByChild("client_meeting_schedule_valid_status").equalTo(this.whereClause);
    //Above sequence of equal IsActive true / IsDelete false / IsDone true / IsNotDone false

    this.clientSchedulesRef.on('value', client_Schedules_Snapshot => {
      this.oNgZone.run(() => {
        // Here we'll work with the list
        client_Schedules_Snapshot.forEach(clientsSheduleSnap => { 
          this.items.push(clientsSheduleSnap.val());
        });
       this.sendItems(this.items); //notify all Observer
      });
    });
  }

  filterItems(searchTerm) {
    return this.items.filter((item) => {
        return item.client_meeting_schedule_client_name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
  }

}

DONE_TASK.ts

constructor(public navCtrl: NavController, public oDataListProvider: DataListProvider, private oNgZone: NgZone) {
    this.searchControl = new FormControl();

    this.oDataListProvider.getItems().subscribe(items=>{
       this.items = items;
    })

}

Примечание.быть опечаткой или синтаксической ошибкой.Пожалуйста, исправьте, если необходимо.