我可以在 Angular Material 表上放置 ngIf else 条件吗？

Question

我按照此处的 Angular 文档https://angular.io/api/common/NgIf在我的材质表上创建 NgIf else 条件。它正在将远程 JSON 文件读取为 API。

API 是 Twitter 数据，我想要运行条件的字段之一是“回复”。如果没有回复，我想用“-”代替“0”。

我收到错误

一个元素上不能有多个模板绑定。仅使用一个以 * 为前缀的属性 (" Replies ]*ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}} "):`

所以看来我无法运行 NgIf 并在同一个元素中插入我的数据，我已经尝试了 HTML 中的各种组合，但我真的被卡住了。

超文本标记语言

<ng-container matColumnDef="replies">
  <th mat-header-cell *matHeaderCellDef> Replies </th>
  <td mat-cell *matCellDef="let hashtags" *ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}} </td>
  <ng-template #noReplies>-</ng-template>
</ng-container>

Answer 1

尝试

    <ng-container matColumnDef="replies">
      <th mat-header-cell *matHeaderCellDef> Replies </th>
      <ng-container *matCellDef="let hashtags">
        <td mat-cell *ngIf="(hashtags.replies>0); else noReplies"> {{hashtags.replies}} </td>
      </ng-container>
      <ng-template #noReplies>-</ng-template>
    </ng-container>

出现此错误的原因是您无法将 2 个结构指令放在同一个 DOM 上

在您的代码中，您在*matCellDef同*ngIf一个<td>.