材料2 datatable動的行テンプレート＃angular4

Question

どのようにtypescriptファイルからデータテーブルの列にテンプレートを渡すことについての任意のアイデアはありますか？私は補間を使ってそれを達成しようとしていますが、それは助けにはならない。何か案は？

おかげで、 アルン・クマール

Answer 1

私はあなたの質問を理解し、多分このような何かしようとしていない完全に確認してください：

​​

をしてから列を選択する

/** 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); 

Answer 2

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>