2017-07-29 64 views
-1

有沒有人有任何想法如何從typescript文件傳遞模板到數據表列?我正在嘗試使用插值來實現這一點,但它沒有幫助。有任何想法嗎?材料2數據表動態行模板#angular4

感謝, 阿倫·庫馬爾

+0

您需要將它們自己定義爲組件並將它們附加到主機元素上g componentfactoryresolver。對於一個SO答案來說這太大了。但是這個文檔部分解釋了它https://angular.io/guide/dynamic-component-loader,你更簡單的選擇是在模板中定義所有可能的列,然後使用ngIf來顯示相應的列。 – bryan60

+0

請發佈您正在使用的代碼片段,或者提供一個plunker示例[這裏是一個開始的模板](https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue)。你可以閱讀更多關於[如何在這裏提問](https://stackoverflow.com/help/how-to-ask):) – 0mpurdy

回答

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>