angular - 过滤 Ionic 3 的数组项
问题描述
我已经实现了数组列表。它是从火力基地填充的。我想搜索该列表。第一次加载页面时,它不显示任何列出的项目。但是,如果我在搜索输入中输入一些内容,那么它会显示列表项。我尝试了 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;
});
}
}
解决方案
问题
数据未加载到位,因为项目在同步加载时不可用。即使在数据加载之后,我们也会通知 Angular 数据可用。
使固定
因此,让我们在 Data Provider 中处理这些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;
})
}
注意:直接在编辑器中编辑,因此可能存在一些拼写错误或语法错误。如有需要请更正。
推荐阅读
- airflow - Airflow SFTPHook - 找不到主机的主机密钥
- android - Recyclerview适配器在Viewpager中片段的onResume方法内不起作用
- android - 活动更改后如何获取当前活动
- javascript - 如何在 Child 构造函数 Javascript ES6 类中调用 Parent 方法?
- revit-api - 通过 Selection.SetElementIds 将选择修改为第一个元素
- javascript - 如何将 MySQL 数据库连接到 ReactJS 应用程序?
- php - Laravel 插入/更新/删除
- php - 如何使用 LDAP 检索 Active Directory 组策略最大密码使用期限
- c# - ASPX:使用 HTML 输入类型=“文件”时出错
- javascript - codeigniter、fullcalendar 和 bootstrap 常见错误问题