Mat-Table 内的 Mat-Table 显示每条记录的额外行收件箱 x答案

【问题标题】：Mat-Table inside a Mat-Table shows extra row for every record Inbox xMat-Table 内的 Mat-Table 显示每条记录的额外行收件箱 x
【发布时间】：2020-07-18 02:55:35
【问题描述】：

我在一个 Mat-Table 中实现了一个 Mat-Table。显示的数据是正确的。但是，对于父行的每一行，它会在 Mat-Table 中显示一个额外的空行。由于我无法追踪错误，我在这个论坛上寻求帮助。请帮忙。

HTML代码如下。

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="listData" class="mat-elevation-z8" matSort multiTemplateDataRows width="100%">

      <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

      <!-- Tax Code Column -->
      <ng-container matColumnDef="taxCode">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Tax Code </th>
        <td mat-cell *matCellDef="let element" align="left"> {{element.taxCode}} </td>
      </ng-container>

      <!-- Tax Name Column -->
      <ng-container matColumnDef="taxDescription">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let element" align="left"> {{element.taxDescription}} </td>
      </ng-container>

      <!-- Tax Type Code Column -->
      <ng-container matColumnDef="taxTypeCode">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Tax Type Code </th>
        <td mat-cell *matCellDef="let element" align="left"> {{element.taxTypeCode}} </td>
      </ng-container>

      <!-- Edit Column -->
      <ng-container matColumnDef="edit">
        <th mat-header-cell *matHeaderCellDef>
        </th>
        <td mat-cell *matCellDef="let row">
            <a mat-button matTooltip="Edit" [routerLink]="['/tax/edit', row.taxCode]" *ngIf="isUserAuthenticated"><mat-icon>create</mat-icon></a>
        </td>
      </ng-container>

      <!-- Delete Column -->
      <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef>
        </th>
        <td mat-cell *matCellDef="let row">
            <button mat-button matTooltip="Delete" color="warn" (click)="onDelete(row.taxCode)" *ngIf="isUserAuthenticated"><mat-icon>clear</mat-icon></button>
        </td>
      </ng-container>

      <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
      <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
          <div class="example-element-detail"
              [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" *ngIf="element.taxVersion.length > 0">

            <table mat-table [dataSource]="element.taxVersion" class="mat-elevation-z8" width="100%">

              <ng-container matColumnDef="taxID">
                <th mat-header-cell *matHeaderCellDef> Tax ID </th>
                <td mat-cell *matCellDef="let elem"> {{elem.taxID}} </td>
              </ng-container>
            
              <ng-container matColumnDef="versionCode">
                <th mat-header-cell *matHeaderCellDef> Version Code </th>
                <td mat-cell *matCellDef="let elem"> {{elem.versionCode}} </td>
              </ng-container>
            
              <ng-container matColumnDef="versionDate">
                <th mat-header-cell *matHeaderCellDef> Version Date </th>
                <td mat-cell *matCellDef="let elem"> {{elem.versionDate}} </td>
              </ng-container>
            
              <ng-container matColumnDef="taxRate">
                <th mat-header-cell *matHeaderCellDef> Tax Rate </th>
                <td mat-cell *matCellDef="let elem"> {{elem.taxRate}} </td>
              </ng-container>
            
              <tr mat-header-row *matHeaderRowDef="displayedColumnsVersion"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumnsVersion;"></tr>
            </table>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                          class="example-element-row"
                          [class.example-expanded-row]="expandedElement === row"
                          (click)="expandedElement = row"
      >
      </tr>
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
    </table>

    <mat-paginator [pageSizeOptions]="[7, 15, 20]" showFirstLastButtons></mat-paginator>
  </div>

enter image description here

【问题讨论】：

标签： angular angular-material

【解决方案1】：

如果没有 element.taxVersion，则需要隐藏 ng-container，现在看起来，如果长度大于 0，则只显示 ng-container 的内部，留下一个空容器。

<ng-container *ngIf="element.taxVersion.length > 0" matColumnDef="expandedDetail">

【讨论】：

对不起，我为 *ngIf 发布了错误的语法，您在 div 上使用的 *ngIf 也应该在 ng-container 上工作。

【解决方案2】：

在另一个 mat-table 中使用 mat-table 有一个不幸的副作用。 Mat-table 将呈现其范围内的所有 mat-rows，包括内部表中的那些。您可以为您的 <tr mat-row *matRowDef="let row; columns: displayedColumnsVersion;"></tr> 行添加一个额外的类 class='inner-table-row' 并检查额外的行以查看这是否是问题所在。解决此问题的最佳选择是将内部表格移动到另一个组件中，并使用选择器将其呈现在外部表格中。

【讨论】：