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

问题描述

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

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

表格组件:

ngOnInit() {this.vzfPuanTablo = []//表数据源//从服务中得到一些东西this.listecidenKisi = this.listeciServis.listecidenKisi;this.listecidenVazife = this.listeciServis.listecidenVazife;//填充表数据源var obj = {};为(让我在 this.listecidenKisi ){for( let v of this.listecidenVazife[i].vazifeSonuclar){obj[v.name] = v.value;}this.vzfPuanTablo.push(obj);对象={}；}//动态创建显示列this.displayedColumns = [];for( let v in this.vzfPuanTablo[0]){this.displayedColumns.push(v);}//初始化 MatTableDataSourcethis.dataSource = new MatTableDataSource(this.vzfPuanTablo);}

---

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

<块引用>

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

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

例如 displayedColumns 可以是这样的:

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

或

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

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

---

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

TableHtml :

 <ng-container *ngFor="让显示列的 disCol;让 colIndex = 索引"matColumnDef="{{disCol}}"><mat-h​​eader-cell *matHeaderCellDef>{{disCol}}</mat-h​​eader-cell><mat-cell *matCellDef=let元素">{{element.disCol}}</mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef=displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row;列:displayedColumns;"></mat-row></mat-table>

我的问题在这里:

<块引用>

{{element.disCol}} 

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

否则，除了这个 元素.disCol 的值" 东西之外，一切都好.

---

当我使用 {{element.disCol}} 显示 具有 disCols 值的元素的值 时，所有单元格都是空的:

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

---

同样如您所见:

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

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

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

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

我该怎么做?

解决方案

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

<块引用>

 {{元素[disCol]}}</mat-cell>

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

现在，一切正常:)

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

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

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

For example displayedColumns can be like that:

• ["one", "two" , "three" , "four" , "five" ]

or

• ["stack","overflow","help","me]

But it is not problem because I can handle it.

---

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>

My problem is here:

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

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

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

---

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

Other example that using {{element}} only:

---

Also as you can see:

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

   • First Example's displayedColumns = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];
   • Second Example's displayedColumns = ['Muhasebe', 'Ders', 'Egitim', 'Harici'];

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

But I need to read disCol's value, and display element.(disCol's value) in the cell.

How can I do that ?

解决方案

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>

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

Now , everything is ok:)

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