遍历mat-table Angular中的dataSource答案

【问题标题】：Iterate through dataSource in mat-table Angular遍历mat-table Angular中的dataSource
【发布时间】：2018-12-24 22:46:56
【问题描述】：

我在通过 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 原因

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

}

我该如何解决？有任何想法吗？谢谢！

【问题讨论】：

您是否尝试过将索引与 ngFor 一起使用，
你能把你的想法写进我的html代码吗？谢谢你:)你太棒了:)
在我的情况下，arrayMain 数组长度必须小于“n”，因为“n”是 dataSource 数组的长度。当 ngFor 被迭代时，它会将迭代次数放在变量 i 中，我们正在访问 dataSource[i] 里面。所以，一定要好好定义。 我想要做的只是我在第一条评论中提到的轻微改变，看看是否可以实现所需的结果。
代码： <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>

标签： html angular typescript angular-material

【解决方案1】：

尝试使用带有 ngFor 的 index 来跟踪您的迭代。我希望它有帮助。

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

        </ng-container>
    </mat-table>
</div>

【讨论】：

【解决方案2】：

另一种遍历dataSource元素的方式：

  dataElement: DataElement[] = [
    {position: 1, name: 'Hy', weight: 1.0079, height: 3.33},
    {position: 2, name: 'He', weight: 4.0026, height: 4.21},
    {position: 3, name: 'Li', weight: 6.941, height: 10.1},
    {position: 4, name: 'Be', weight: 9.0122, height: 11},
    {position: 5, name: 'Bo', weight: 10.811, height: 85},
    {position: 6, name: 'Ca', weight: 12.0107, height: 8.5},
    {position: 7, name: 'Ni', weight: 14.0067, height: 85.1},
    {position: 8, name: 'Ox', weight: 15.9994, height: 0.85},
    {position: 9, name: 'Fl', weight: 18.9984, height: 123},
    {position: 10, name: 'Ne', weight: 2110.1797, height: 8}
  ];

  columns = [
    {columnDef: 'position', header: 'No.', cell: (element: DataElement) => `${element.position}`},
    {columnDef: 'name', header: 'Name', cell: (element: DataElement) => `${element.name}`},
    {columnDef: 'weight', header: 'Weight', cell: (element: DataElement) => `${element.weight}`},
    {columnDef: 'height', header: 'Height', cell: (element: DataElement) => `${element.height}`},
    {columnDef: 'result', header: 'Result', cell: (element: DataElement) => `${element.result}`}
  ];

  displayedColumns = this.columns.map(result => result.columnDef);

  dataSource = this.dataElement;

最后是html：

<mat-table #table [dataSource]="dataSource">
  <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
    <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
    <mat-cell *cdkCellDef="let row">{{ column.cell(row) }}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

回购： https://stackblitz.com/edit/angular-mat-table-create-dynamically

【讨论】：