[英]Angular Material Table with sort and paginator
我在項目中使用了角材料表。 該表的數據將通過輸入由父組件過去。 這很好。 我也想在表中添加一個分頁器,並且一列應該是可排序的。 但是在設置排序和分頁器時,出現錯誤“ ....無法設置未定義的.sort”。
<div id="table-overflow">
<mat-table [dataSource]="dataSourceLog" class="mat-elevation-z8" matSort matSortDisableClear>
<ng-container matColumnDef="actionTS">
<mat-header-cell *matHeaderCellDef mat-sort-header>TimeStamp</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.actionTSFormated}} </mat-cell>
</ng-container>
/* some more columns*/
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
<mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
.ts文件
export class ProtocolLogTable implements OnInit{
@Input() dataSourceLog: MatTableDataSource<DataLog>;
timestampFrom: string;
timestampTo: string;
displayedColumns: string[] = ['actionTS' /* some more columns */];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSourceLog.sort = this.sort;
this.dataSourceLog.paginator = this.paginator;
}
}
創建組件后,可能不會立即獲得數據。 嘗試像這樣將代碼從ngOnInit
移到@Input
setter
public dataSourceLogValue: MatTableDataSource<DataLog>;
@Input()
public set dataSourceLog(value: MatTableDataSource<DataLog>) {
if (value) {
this.dataSourceLogValue = value;
}
}
並確保在模板中將dataSourceLogValue
重命名為dataSourceLog
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.