Question

有没有人知道如何从typescript文件传递模板到数据表列？我试图用插值实现它，但它没有帮助。任何想法？

谢谢， Arun kumar

Answer 1

我不完全确定我理解你的问题，但也许可以尝试这样的事情：

<!-- Generic column definition -->
<ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
  <md-header-cell *cdkHeaderCellDef>{{ column.header }}</md-header-cell>
  <md-cell *cdkCellDef="let row">{{ column.cell(row) }}</md-cell>
</ng-container>

然后选择你的专栏

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

材料2数据表动态行模板#angular4

2 个答案: