无模型的角度材料表动态列 [英] 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-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell><mat-cell *matCellDef=let元素">{{element.disCol}}</mat-cell></ng-容器><mat-header-row *matHeaderRowDef=displayedColumns"></mat-header-row><mat-row *matRowDef="let row;列:displayedColumns;"></mat-row></mat-table>
我的问题在这里:
<块引用>{{element.disCol}}
实际上,我想在单元格中显示element.disCol's value"
,但我不知道该怎么做.
否则,除了这个 元素.disCol 的值"
东西之外,一切都好.
当我使用 {{element.disCol}}
显示 具有 disCols 值的元素的值
时,所有单元格都是空的:
仅使用 {{element}}
的其他示例:
同样如您所见:
表数据源正在动态变化.这意味着我不能轻易使用
{{element.ColumnName}}
,因为我什至不知道它是什么.- 第一个示例的显示列 = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];
- 第二个例子的displayColumns = ['Muhasebe', 'Ders', 'Egitim', 'Harici'];
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:
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'];
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屋!