[英]Custom Angular Material 2 DataTable table header by object
我有一個普通的Material 2 DataTable,我想按對象自定義表頭
例如:
<mat-form-field style="width:100%">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="{{item}}" *ngFor="let item of old_title_list">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{item}} </th>
<td mat-cell *matCellDef="let row"> {{row[item]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="25" showFirstLastButtons></mat-paginator>
</div>
它成功地顯示表,但是th
只是呈現中定義的項目名稱data_list
對象。
所以我希望我應該將代碼更改為如下所示:
<ng-container matColumnDef="{{item.data}}" *ngFor="let item of new_title_list">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{item.title}} </th>
<td mat-cell *matCellDef="let row"> {{ row[item.data] }} </td>
</ng-container>
我希望它可以通過鍵獲取標頭值,但事實並非如此。 我該怎么辦 ?
樣本數據:
var old_title_list = ['aaaaa', '1111', '2222', '3333'];
var data_list: [{
aaaaa: 'World',
'1111': 'this is 1111',
'2222': 'this is 2222',
'3333': 'this is 3333',
},{
aaaaa: 'World',
'1111': 'this is 1111',
'2222': 'this is 2222',
'3333': 'this is 3333',
},{
aaaaa: 'World',
'1111': 'this is 1111',
'2222': 'this is 2222',
'3333': 'this is 3333',
}];
var new_title_list = [
{data: 'aaaaa', title: 'Hello'},
{data: '1111', title: '1'},
{data: '2222', title: '2'},
{data: '3333', title: '3'},
];
您的項目是對象。 您可以使用鍵數組顯示列名之后,必須通過item.keys()獲取對象的鍵。 您可以嘗試如下操作:
<ng-container matColumnDef="{{item.keys()[i]}}" *ngFor="let item of data_list; let i = index">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{item.keys()[i]}} </th>
<td mat-cell *matCellDef="let row"> {{ (row[item.data] }} </td>
</ng-container>
如果要使用title_list數組中的標題,可以使用以下代碼:
<ng-container matColumnDef="{{title_list[i].title}}" *ngFor="let item of data_list; let i = index">
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{title_list[i].title}} </th>
<td mat-cell *matCellDef="let row"> {{ (row[item.data] }} </td>
</ng-container>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.