如何使用 Angular 在 mat-h​​eader-cell 行中呈现动态数据

Posted 2023-02-22

【中文标题】如何使用 Angular 在 mat-h​​eader-cell 行中呈现动态数据

【英文标题】：How to render dynamic data in mat-header-cell row with Angular

【发布时间】：2019-11-29 20:29:30

【问题描述】：

我希望通过 API 调用呈现我的标头。我第一次对它们进行硬编码，然后意识到我需要使用 API 调用，以便为表格提供更多功能，例如逐列过滤。

我正在进行应用程序改造，在之前的项目中，我使用了一个 html 表格，该表格的标题是通过 API 调用的。

<!-- Empty row first group -->
      <ng-container matColumnDef="header-row-first-group">
        <th mat-header-cell *matHeaderCellDef [attr.colspan]="2">
        </th>
      </ng-container>

      <!-- dynamically rendered headers -->
      <ng-container matColumnDef="header-row-second-group">
        <th mat-header-cell *matHeaderCellDef [attr.colspan]="2" *ngFor="let title of titles; let i = index"> title <br> </th>
      </ng-container>


      <tr mat-header-row
        *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']; sticky: true">
      </tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

在我尝试调用 API 的“动态呈现的标题”注释中，当我运行它时，我收到此错误

未捕获的错误：模板解析错误： 一个元素上不能有多个模板绑定。仅使用一个以 * 为前缀的属性 ("umnDef="header-row-second-group"> ]*ngFor="let title of title; let i = index"> title

【参考方案1】：

不能在 Angular 中的一个元素上使用两个模板绑定，正如之前在这篇文章中解释的那样：How to apply multiple template bindings on one element in angular

您应该包装您的容器，并像这样使用 *ngFor：

<ng-container *ngFor="let title of titles">
  <ng-container  matColumnDef="header-row-second-group">
    <th mat-header-cell *matHeaderCellDef [attr.colspan]="2" > title <br> </th>
  </ng-container>
</ng-container>