数组项过滤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可用数据。

修复

因此，让我们在数据提供者中通过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;
    })

}

  

注意：直接在编辑器中进行编辑，因此可能存在一些错别字或语法错误。请根据需要更正。