首页 文章

在mat-table Angular中迭代dataSource

提问于
浏览
1

我有通过dataSource迭代的问题,我有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>

包含此数据的行包含问题

<mat-table #table [dataSource]="dataSource[1]" matSort>

我只能在更改数组内的数字时更改数据:

dataSource[0],dataSource[1]....,dataSource[n]

我尝试使用* 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

for(identificator = 0; identificator < n; identificator++)
       createData(identificator) 

createData(identificator) {
   some code...
       .
       . 
       .
    this.dataSource[identificator] = new MatTableDataSource(testData);
    this.dataSource[identificator].sort = this.sort;

}

我该如何解决?有任何想法吗?谢谢 !

1 回答

  • 1

    尝试使用带有ngFor的索引来跟踪迭代 . 希望它有所帮助 .

    <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>
    

相关问题