dynamic - 无模型的角度 Material 表动态列

Question

我需要使用没有模型的角度 Material 表，因为我不知道服务会带来什么。

所以我在这样的组件中动态初始化我的 MatTableDataSource 和 displayedColumns :

表组件:

ngOnInit() {

this.vzfPuanTablo = [] //TABLE DATASOURCE

//GET SOMETHING FROM SERVICE 
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;

//FILL TABLE DATASOURCE 
var obj = {};
for (let i in this.listecidenKisi ){
    for( let v of this.listecidenVazife[i].vazifeSonuclar){
        obj[v.name] = v.value;
    }
    this.vzfPuanTablo.push(obj);
    obj={};
}

//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}

代码最重要的部分在这里:

for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

我在这里动态创建 displayedColumns，这意味着；即使我不知道服务会带来什么，我也可以在表格中展示。

例如 displayedColumns 可以是这样的:

[“一”、“二”、“三”、“四”、“五”]

要么

[“堆栈”、“溢出”、“帮助”、“我”]

但这不是问题，因为我可以处理它。

但是当我想在 HTML 中显示它时，我无法正确显示，因为 matCellDef 事情:

TableHtml:

    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element.disCol}}
            </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

我的问题在这里:

< mat-cell *matCellDef="let element "> {{element.disCol}} < / mat-cell>

事实上，我想在单元格中显示 element."disCol's value"，但我不知道该怎么做。

否则，除了这个 element."disCol's value" 东西，一切都好。

当我使用 {{element.disCol}} 显示 value of element that has disCols's value 时，所有单元格都是空的:



仅使用 {{element}} 的其他示例:



同样如您所见:

表数据源正在动态变化。这意味着我不能轻易使用 {{element.ColumnName}}，因为我什至不知道它是什么。

第一个例子的显示列 = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];

第二个例子的显示列 = ['Muhasebe', 'Ders', 'Egitim', 'Harici'];

matHeaderCellDef 是正确的，因为它直接使用了 {{disCol}}。

但是我需要读取disCol的值，并在单元格中显示 element.(disCol's value)。

我该怎么做？

Answer 1

我找到了解决方案:)
这很容易，但一开始我看不到:)
只是这样:

        <mat-cell *matCellDef="let element "> {{element[disCol]}}
        </mat-cell>

我必须只在 HTML 中使用 {{element[disCol]}}。

现在，一切正常:)