Question

我打算设计一个动态角度数据表。所以我定义了一个名为displayedColumns的数组，并用列名填充它。然后，我用适当的数据填充了dataSource，一切准备就绪。

首先，我测试了静态列名称，并且一切正常。

然后我尝试使数据表动态化。我使用displayedColumns作为列名数组而不是position列进行测试，一切都恢复了，并且得到的结果与生成的第一个代码相同。

但是，当我决定将所有其他列替换为其数组和索引时，就会产生混乱！

这是我的第一个代码：

    <table mat-table [dataSource]="this.dataSource">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- BrandTitle Column -->
  <ng-container matColumnDef="brandTitle">
    <th mat-header-cell *matHeaderCellDef> BrandTitle </th>
    <td mat-cell *matCellDef="let element"> {{element.brandTitle}} </td>
  </ng-container>

  <!-- BrandURL Column -->
  <ng-container matColumnDef="brandURL">
    <th mat-header-cell *matHeaderCellDef> BrandURL </th>
    <td mat-cell *matCellDef="let element"> {{element.brandURL}} </td>
  </ng-container>

  <!-- BrandDescription Column -->
  <ng-container matColumnDef="brandDescription">
    <th mat-header-cell *matHeaderCellDef> BrandDescription </th>
    <td mat-cell *matCellDef="let element"> {{element.brandDescription}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

第二个代码是：

<table mat-table [dataSource]="this.dataSource">
  <!-- Position Column -->
  <ng-container [matColumnDef]="displayedColumns[0]">
    <th mat-header-cell *matHeaderCellDef> {{displayedColumns[0]}} </th>
     <td mat-cell *matCellDef="let element"> {{element[displayedColumns[0]]}} </td>
  </ng-container>

  <!-- BrandTitle Column -->
  <ng-container matColumnDef="brandTitle">
    <th mat-header-cell *matHeaderCellDef> BrandTitle </th>
    <td mat-cell *matCellDef="let element"> {{element.brandTitle}} </td>
  </ng-container>

  <!-- BrandURL Column -->
  <ng-container matColumnDef="brandURL">
    <th mat-header-cell *matHeaderCellDef> BrandURL </th>
    <td mat-cell *matCellDef="let element"> {{element.brandURL}} </td>
  </ng-container>

  <!-- BrandDescription Column -->
  <ng-container matColumnDef="brandDescription">
    <th mat-header-cell *matHeaderCellDef> BrandDescription </th>
    <td mat-cell *matCellDef="let element"> {{element.brandDescription}} 
</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

最后的第三个代码是：

        <table mat-table [dataSource]="this.dataSource">
      <!-- Position Column -->
      <ng-container [matColumnDef]="displayedColumns[0]">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[0]}} </th>
         <td mat-cell *matCellDef="let element"> {{element[displayedColumns[0]]}} </td>
      </ng-container>

      <!-- BrandTitle Column -->
      <ng-container [matColumnDef]="displayedColumns[1]">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[1]}} </th>
         <td mat-cell *matCellDef="let element"> {{element[displayedColumns[1]]}} </td>
      </ng-container>

      <!-- BrandURL Column -->
      <ng-container [matColumnDef]="displayedColumns[2]">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[2]}} </th>
         <td mat-cell *matCellDef="let element"> {{element[displayedColumns[2]]}} </td>
      </ng-container>

      <!-- BrandDescription Column -->
      <ng-container [matColumnDef]="displayedColumns[3]">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[3]}} </th>
         <td mat-cell *matCellDef="let element"> {{element[displayedColumns[3]]}} </td>
      </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

错误是：Error: Duplicate column definition name provided: "undefined".

任何人都可以解释我怎么了吗？以及为什么第二个代码有效而第三个代码无效？

我需要让您知道此代码已成功执行：

<table mat-table [dataSource]="this.dataSource">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> {{displayedColumns[0]}} </th>
    <td mat-cell *matCellDef="let element"> {{element[displayedColumns[0]]}} </td>
  </ng-container>

  <!-- BrandTitle Column -->
  <ng-container matColumnDef="brandTitle">
    <th mat-header-cell *matHeaderCellDef> {{displayedColumns[1]}}// </th>
    <td mat-cell *matCellDef="let element"> {{element[displayedColumns[1]]}} </td>
  </ng-container>

  <!-- BrandURL Column -->
  <ng-container matColumnDef="brandURL">
    <th mat-header-cell *matHeaderCellDef> {{displayedColumns[2]}}// </th>
    <td mat-cell *matCellDef="let element"> {{element[displayedColumns[2]]}} </td>
  </ng-container>

  <!-- BrandDescription Column -->
  <ng-container matColumnDef="brandDescription">
    <th mat-header-cell *matHeaderCellDef> {{displayedColumns[3]}}// </th>
    <td mat-cell *matCellDef="let element"> {{element[displayedColumns[3]]}} </td>
  </ng-container>

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

问题出在matColumnDef上。

您可能想知道，如果我仅在一列中使用[matColumnDef]="displayedColumns[x]"可以正常工作，但是当我在另一列中使用它会引发错误！

有什么主意吗？

Answer 1

解决方案是：

<table mat-table [dataSource]="this.dataSource">
  <div *ngFor="let displayedColumn of displayedColumns">
    <ng-container [matColumnDef]="displayedColumn">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumn}} </th>
        <td mat-cell *matCellDef="let element"> {{element[displayedColumn]}} </td>
    </ng-container>
  </div>
  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

这两种角度数据表有什么区别？

1 个答案: