在Angular的Mat-table中使用NgFor

时间:2019-05-22 06:09:29

标签: angular mat-table

在我的代码中,我可以重复编号。表,但问题是该列号。并且它的名称对于所有迭代的表都相同。 我该如何解决?

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

1 个答案:

答案 0 :(得分:0)

尝试一下

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