没有模型的角材料表动态列 [英] Angular Material Table Dynamic Columns without model

问题描述

我需要使用没有模型的棱角物料台，因为我不知道维修会带来什么.

I need to use angular material table without model, because I don't know what will come from service.

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

So I am initializing my MatTableDataSource and displayedColumns dynamically in component like that :

TableComponent:

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);
}

---

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

---

The most important part of code is here :

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

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

I am creating displayedColumns here dynamically, it means; even I don't know what will come from service, I can show it in table.

例如displayedColumns可能是这样的:

• [一个"，两个"，三个"，四个"，五个"]

或

• [堆栈"，溢出"，帮助"，我]

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

But it is not problem because I can handle it.

但是当我想以HTML格式显示时，由于以下原因我无法正确显示 matCellDef事物:

But when I want to show it in HTML, I can't show properly because of matCellDef thing:

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>

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

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

In fact, I want to display element."disCol's value" in the cell, but I don't know how can I do that.

否则，除了此element."disCol's value"之外，其他一切都很好.

Otherwise, everything is ok except this element."disCol's value" thing.

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

When I use {{element.disCol}} to display value of element that has disCols's value , all cells are empty like that:

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

您也可以看到:

1. 表数据源正在动态更改.这意味着我不能轻松使用{{element.ColumnName}}，因为我什至都不知道它是什么.

1. Table datasource is changing dynamically. It means I can't use {{element.ColumnName}} easily, because I don't know even what is it.

• 第一个示例的displayColumns = ['Vazife'，'AdSoyad'，'Kirmizi'，'Mavi'，'Yesil'，'Sari']；
• 第二个示例的displayColumns = ['Muhasebe'，'Ders'，'Egitim'，'Harici'];

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

matHeaderCellDef is correct , because it is using {{disCol}} directly.

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

我该怎么做?

推荐答案

我找到了解决方案:) 这是非常非常容易的，但是起初我看不到:) 只是这样:

I found solution :) It is very very easy but i could't see at first :) only like that :

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

我只能在HTML中使用{{element[disCol]}}.

I must use {{element[disCol]}} only in HTML.

现在，一切正常:)

这篇关于没有模型的角材料表动态列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！