遍历mat-table Angular中的dataSource [英] Iterate through dataSource in mat-table Angular
本文介绍了遍历mat-table Angular中的dataSource的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在通过dataSource进行迭代时遇到问题,那里有用于mat-table的数据
I have problem with iterations through dataSource, where I have data for mat-table
<div *ngFor="let element of arrayMain" id = "{{element}}" class="my_item">
<div><span class="skuska"><span class="mat-subheading-2">{{element}}</span></span></div>
<mat-table #table [dataSource]="dataSource[1]" matSort>
<ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
<mat-header-cell *matHeaderCellDef mat-sort-header > {{column.value}} </mat-header-cell>
<mat-cell *matCellDef="let element" [style.background]="element[column.id].color"> <div class="mat-cell-inner">{{element[column.id].name}}</div></mat-cell>
</ng-container>
M:<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
包含此数据的行包含问题
The row with this data contain the problem
<mat-table #table [dataSource]="dataSource[1]" matSort>
我只能在更改数组内的数字时更改数据:
I can only change the data when i change the number inside the array:
dataSource[0],dataSource[1]....,dataSource[n]
我尝试使用* ngFor原因
I try to use *ngFor cause
<mat-table *ngFor = "let calendars of dataSource" #table [dataSource]="{{calendars}}" matSort>
但显示错误:
ng: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{calendars}}] in @101:73
我将dataSource填充到函数中
I fill the dataSource in function
for(identificator = 0; identificator < n; identificator++)
createData(identificator)
createData(identificator) {
some code...
.
.
.
this.dataSource[identificator] = new MatTableDataSource(testData);
this.dataSource[identificator].sort = this.sort;
}
我该如何解决?有任何想法吗?谢谢!
How can I fix it? Any ideas? Thank you !
推荐答案
尝试将索引与ngFor一起使用,以跟踪您的迭代.希望对您有所帮助.
Try using index with ngFor, to track your iterations. Hope its helpful.
<div *ngFor="let element of arrayMain, let myIndex=index" id = "{{element}}" class="my_item"> <div><span class="skuska"><span class="mat-subheading-2">{{element}}</span></span></div> <mat-table #table [dataSource]="dataSource[myIndex]" matSort> <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames"> <mat-header-cell *matHeaderCellDef mat-sort-header > {{column.value}} </mat-header-cell> // your same code </div>
这篇关于遍历mat-table Angular中的dataSource的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文