Angular2数据表筛选器列
如何使用Angular2数据表过滤整个列标题和数据 我可以过滤列数据,但标题仍保留..: 编辑:Angular2数据表筛选器列,angular,datatable,angular-material,Angular,Datatable,Angular Material,如何使用Angular2数据表过滤整个列标题和数据 我可以过滤列数据,但标题仍保留..: 编辑: 这其实很简单,也是我的疏忽。解决方案就是将我的过滤函数添加到MathEdrrowDef和matRowDef中。我已经更新了我的stackblitz,所以它现在可以按照我的预期工作了我给你举个例子作为解决方案,因为这并不难,你可以在中找到解决方案。把这种情况适应你的情况就行了 尝试像文档中那样的方法,将显示的数据分为列、行和表的常规数据 const ELEMENT_DATA: PeriodicElem
这其实很简单,也是我的疏忽。解决方案就是将我的过滤函数添加到MathEdrrowDef和matRowDef中。我已经更新了我的stackblitz,所以它现在可以按照我的预期工作了我给你举个例子作为解决方案,因为这并不难,你可以在中找到解决方案。把这种情况适应你的情况就行了 尝试像文档中那样的方法,将显示的数据分为列、行和表的常规数据
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
];
data: PeriodicElement[] = ELEMENT_DATA;
displayedColumns: string[] = ['name', 'weight', 'symbol', 'position'];
columnsToDisplay: string[] = this.displayedColumns.slice(); //returns a copy of displayedColumns
现在,您可以在html文件中使用它们,如下所示:
<table mat-table [dataSource]="data">
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
谢谢你的回答。是的,只是我太笨了,我错过了MatheadErrorWDEF,我更新了我的stackblitz,所以它现在可以按预期工作了
<button mat-raised-button (click)="removeColumn()"> Remove column </button>
removeColumn() {
this.columnsToDisplay.pop(); //removes the last element of the array
}