Angular 2材料实现排序,过滤和分页
发布时间:2020-12-17 06:57:51 所属栏目:安全 来源:网络整理
导读:我正在尝试使用md-table实现排序,过滤和分页. 这是我的代码: connect(): ObservablePatient[] {const displayPatientDataChanges = [ this._patientDatabase.dataChange,this._filterPatientChange,this._paginator.page,this._sort.mdSortChange,];return
我正在尝试使用md-table实现排序,过滤和分页.
这是我的代码: connect(): Observable<Patient[]> { const displayPatientDataChanges = [ this._patientDatabase.dataChange,this._filterPatientChange,this._paginator.page,this._sort.mdSortChange,]; return Observable.merge(...displayPatientDataChanges).map(() => { const startIndex = this._paginator.pageIndex * this._paginator.pageSize; let displayData = this._patientDatabase.data.slice().filter((item: Patient) => { let searchStr = (item.firstname + ' ' + item.lastname).toLowerCase(); return searchStr.indexOf(this.filter.toLowerCase()) != -1; }); 我想返回这两个值,但它只返回过滤器和分页不起作用的排序函数. return displayData.splice(startIndex,this._paginator.pageSize),this.getSortedData(); }); } disconnect() { } getSortedData(): Patient[] { const data = this._patientDatabase.data.slice(); if (!this._sort.active || this._sort.direction == '') { return data; } return data.sort((a,b) => { let propertyA: number|string|Date = ''; let propertyB: number|string|Date = ''; switch (this._sort.active) { case 'id': [propertyA,propertyB] = [a.id,b.id]; break; case 'firstname': [propertyA,propertyB] = [a.firstname,b.firstname]; break; case 'lastname': [propertyA,propertyB] = [a.lastname,b.lastname]; break; case 'dateOfBirth': [propertyA,propertyB] = [a.dateOfBirth,b.dateOfBirth]; break; case 'sex': [propertyA,propertyB]= [a.sex,b.sex]; break; case 'dateAdded': [propertyA,propertyB] = [a.dateAdded,b.dateAdded]; break; } let valueA = isNaN(+propertyA) ? propertyA : +propertyA; let valueB = isNaN(+propertyB) ? propertyB : +propertyB; return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : 1); }); } 如何使排序,过滤和分页工作? 解决方法
编辑于01/29/2018:有关材料数据表的文章已经编写,可以看到
here,它包括服务器分页,过滤和排序,可能比我下面的代码更新,因为很多人们正在访问这篇文章,我想有一个真正的需要,希望它会帮助你们所有人,玩得开心.
编辑:plunkr示例不再起作用,所以我在stackblitz上重新实现了最新的材料发布(截至此编辑,测试版12) Here is the updated version 这个plunkr example(不再起作用,请参阅上面的链接以获取工作版本)将向您展示包含您正在寻找的所有实现的表. 您可以看到它是如何通过依赖注入实现的: const displayDataChanges = [ this._exampleDatabase.dataChange,this._filterChange,]; Observable.merge(… displayDataChanges).map过滤数据,sortData()方法对其进行排序,并且分页器根据过滤数据的长度生成页数. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |