-1
A
回答
0
不能完全確定,我理解你的問題,但也許嘗試這樣的事:
然後選擇您的列
/** Table columns */
columns = [
{ columnDef: 'userId', header: 'ID', cell: (row: UserData) => `${row.id}` },
{ columnDef: 'userName', header: 'Name', cell: (row: UserData) => `${row.name}` },
{ columnDef: 'progress', header: 'Progress', cell: (row: UserData) => `${row.progress}%` }
];
/** Column definitions in order */
displayedColumns = this.columns.map(x => x.columnDef);
-1
export class MyDatatableComponent implements OnInit {
displayedColumns = ['Id', 'Name', 'Address'];
dataSource = new MatTableDataSource();
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngAfterViewInit(){
this.dataSource.paginator = this.paginator
this.dataSource.sort = this.sort
}
ngOnInit() {
this.dataSource = new MatTableDataSource(data);
}
}
<mat-table [dataSource]="dataSource" matSort>
<ng-container *ngFor="let cols of displayedColumns" [matColumnDef]="cols">
<mat-header-cell *matHeaderCellDef mat-sort-header> {{cols}} </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row[cols]}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
相關問題
- 1. 帶動態行的角度2材料數據表
- 2. 角度材料2數據表:在模板中捕獲屬性?
- 3. 切換到Angular4,材料2自動完成onSelect()不起作用
- 4. 對角的自定義模板(2)材料表(墊表)
- 5. 角材料模板網站
- 6. Anuglar材料2自動完成:綁定到模板中單擊
- 7. 從模板添加動態內容在MD-標籤角材料
- 8. 角2材料
- 9. NativeScript與angular4的材料設計?
- 10. Angular4材料:如何加載內容sidenav
- 11. Angular4 webpack2 @角/材料生成錯誤
- 12. 材料Datepicker不能在Angular4中工作
- 13. .Net Core 2水療中心模板與角度材料
- 14. NG-模板在MD-標籤複雜的標籤材料2
- 15. Docusign XML複合材料模板
- 16. 角材料:基本用法模板
- 17. flex-sm模擬角材料2應用
- 18. 材料展開面板的數據驅動內容
- 19. 角2材料,自動完成與遠程數據
- 20. 角度材料2數據表設置爲主 - 細節視圖?
- 21. Liferay動態數據列表模板
- 22. 笨動態數據模板
- 23. Angular 2材料設計響應表
- 24. MD-表角材料2不工作
- 25. 角材料2表頭中心對齊
- 26. 角2材料:「表達改變[..]」以mdInput
- 27. 角度2材料網格列表卡
- 28. 動態名稱的角度材料2日期選擇器
- 29. 角2+,材料不工作
- 30. 材料和角度2
您需要將它們自己定義爲組件並將它們附加到主機元素上g componentfactoryresolver。對於一個SO答案來說這太大了。但是這個文檔部分解釋了它https://angular.io/guide/dynamic-component-loader,你更簡單的選擇是在模板中定義所有可能的列,然後使用ngIf來顯示相應的列。 – bryan60
請發佈您正在使用的代碼片段,或者提供一個plunker示例[這裏是一個開始的模板](https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue)。你可以閱讀更多關於[如何在這裏提問](https://stackoverflow.com/help/how-to-ask):) – 0mpurdy