时间戳

首页 > 解决方案 > 在 Mattable 中循环 DataSource 时，标题也在重复

html - 在 Mattable 中循环 DataSource 时，标题也在重复

问题描述

我试图在循环 dataSource 数组时将多行追加到表中，同时调用 api 在 for 循环中填充 dataSource 数组。但是，在循环时，表格标题也在重复。我怎样才能只重复表格行而不重复标题？桌子

<table mat-table *ngFor="let dataSource of dataSource" [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;" matSort #sort="matSort" matTableExporter #exporter="matTableExporter">
  <!-- <table mat-table [dataSource]="dataSource"  class="tableCss table-striped" style="width: 100%;" matSort #sort = "matSort" matTableExporter    #exporter="matTableExporter" > -->

  <!-- <div *ngFor="let dataSource of dataSource" [dataSource]="dataSource"> -->
  <ng-container matColumnDef="typeId">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
    <td mat-cell *matCellDef="let element">{{element.typeId}} </td>
  </ng-container>

  <ng-container matColumnDef="typeName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element">{{element.typeName}} </td>
  </ng-container>

  <ng-container matColumnDef="bankAccName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Bank Account Name </th>
    <td mat-cell *matCellDef="let element">{{element.bankAccName}} </td>
  </ng-container>

  <ng-container matColumnDef="bankAccNo">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Bank Account No. </th>
    <td mat-cell *matCellDef="let element">{{element.bankAccNo}} </td>
  </ng-container>

  <ng-container matColumnDef="bankIFSC">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> IFSC code </th>
    <td mat-cell *matCellDef="let element">{{element.bankIFSC}} </td>
  </ng-container>

  <ng-container matColumnDef="autoBankVerFlag">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Auto Bank Verification Flag </th>
    <td mat-cell *matCellDef="let element">{{element.autoBankVerFlag}} </td>
  </ng-container>

  <ng-container matColumnDef="autoBankVerDetails">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Auto Bank Verification Details </th>
    <td mat-cell *matCellDef="let element">{{element.autoBankVerDetails}} </td>
  </ng-container>

  <ng-container matColumnDef="cancelledChequeImg">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Cancelled Cheque Images </th>
    <td mat-cell *matCellDef="let element">Image</td>
  </ng-container>


  <ng-container matColumnDef="Edit">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Edit</th>
    <td mat-cell *matCellDef="let element" class="action-link">
      <button class="table-buttons" (click)="openDialog(element, 'agg')"><i class="fa fa-edit" style="color: #E61748; font-size: 22px;"></i></button>
    </td>
  </ng-container>

  <!-- </div> -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky : true"></tr>
  <tr mat-row *matRowDef="let row; columns:   getDisplayedColumns();"></tr>

</table>

标签： htmlangulartypescript

解决方案

您不应该在表格元素上使用 ngFor，MatTable 将使用 dataSource 属性自动处理它。

更改以下代码

<table mat-table *ngFor="let dataSource of dataSource" [dataSource]="dataSource"  class="tableCss table-striped" style="width: 100%;" matSort #sort = "matSort" matTableExporter    #exporter="matTableExporter" >

至

<table mat-table [dataSource]="dataSource"  class="tableCss table-striped" style="width: 100%;" matSort #sort = "matSort" matTableExporter    #exporter="matTableExporter" >

推荐阅读