当我尝试在同一组件上实现两个具有所有功能(如过滤器,分页和排序)的席子表时。但在第二个垫子表过滤器不起作用。 这是我的.html代码
<mat-form-field>
<input matInput (keyup)="applyFilterOne($event.target.value)" placeholder="Filter" />
</mat-form-field>
<table mat-table matSort [dataSource]="dataSourceOne" #TableOneSort="matSort"class="mat-elevation-z8" style="width: 100%;" >
</table>
<mat-paginator
#TableOnePaginator="matPaginator"
[pageSize]="3"
[pageSizeOptions]="[5, 10, 25, 100]"
></mat-paginator>
<mat-form-field>
<input
matInput
(keyup)="applyFilterTwo($event.target.value)"
placeholder="Filter"
/>
</mat-form-field>
<table
mat-table
matSort
[dataSource]="dataSourceTwo"
#TableTwoSort="matSort"
class="mat-elevation-z8"
style="width: 100%;"
>
</table>
<mat-paginator
#TableTwoPaginator="matPaginator"
[pageSize]="3"
[pageSizeOptions]="[5, 10, 25, 100]"
></mat-paginator>
</div>
这是.ts文件代码
ngOnInit() {
this.dataSourceOne.paginator = this.tableOnePaginator;
this.dataSourceOne.sort = this.tableOneSort;
this.dataSourceTwo.paginator = this.tableTwoPaginator;
this.dataSourceTwo.sort = this.tableTwoSort;
this._orderDetailsServices.getOrderDetails().subscribe(r =>{console.log(r);
this.users = r.orderItemsResponces;
this.dataSourceOne = new MatTableDataSource(this.users);
this.dataSourceOne.paginator = this.tableOnePaginator;
this.dataSourceOne.sort = this.tableOneSort;
});
this._orderDetailsServices.getAllOrderUserDetails().subscribe(r =>{console.log(r);
this.orderitem=r.orderResponces;
this.dataSourceTwo = new MatTableDataSource(this.orderitem);
this.dataSourceTwo.paginator = this.tableTwoPaginator;
this.dataSourceTwo.sort = this.tableTwoSort;
});
}
applyFilterOne(filterValue: string) {
this.dataSourceOne.filter = filterValue.trim().toLowerCase();
}
applyFilterTwo(filterValue: string) {
this.dataSourceTwo.filter = filterValue.trim().toLowerCase();
}
在这里,两个File code。一个是.html,另一个是.ts文件代码。 我正在使用mat表在角度8中显示Web.api数据的数据。