Angular 这两种角度数据表之间的区别是什么？

我打算设计一个动态角度数据表。因此，我定义了一个名为

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>

问题在于

matColumnDef

您可能想知道，如果我只在一列中使用

[matColumnDef]=“displayedColumns[x]”

，它可以正常工作，但当我在另一列中使用它时，它会引发错误

有什么想法吗？

解决方案是：

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

{{displayedColumn}}
{{element[displayedColumn]}

发布displayedColumns项目以及console.log并检查数据源项目。无法复制！。在这里工作很好：

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

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

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