Использование NgFor в Mat-table в Angular

Question

Здесь, в моем коде, я могу повторить нет. таблиц, но проблема в том, что столбец нет. и его имя остается одинаковым для всех таблиц, которые повторяются. Как я могу это исправить?

<div class="mat-table {{defaultView == 'table' ? 'mat-table-lg' : 'mat-table-sm'}}" data-automation-attribute="div-results">
   <mat-table #table *ngFor="let dataSource of dataSources let Ind = index" [dataSource]="dataSource" matSort>                  
      <ng-container *ngFor="let disCol of displayedColumnss let colIndex = index" matColumnDef="{{disCol}}">
        <mat-header-cell class="tableHeader" style="font-weight: bold" *matHeaderCellDef mat-sort-header>
          {{ columnNames[colIndex] }}  

        </mat-header-cell>     
        <mat-header-cell class="tableHeader" style="font-weight: bold" *matHeaderCellDef >
            <mat-cell *matRowDef ><input matInput placeholder="Item Code" >   </mat-cell>    
            <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
            <mat-cell *matCellDef> {{colIndex}}</mat-cell>
          </mat-header-cell>         

        <mat-cell *matCellDef="let element" style="text-align: right" contenteditable="true"
          ><label>{{element[disCol]}}</label>
          </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumnss"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumnss;">             
      </mat-row>
    </mat-table><br>

  </div>

Answer 1

Попробуйте это

ngFor="let item of items; let i = index" [attr.data-index]="i