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

Question

我在这里关注了 Angular 文档 https://angular.io/api/common/NgIf在我的 Material 表上创建一个 NgIf else 条件。它正在读取远程 JSON 文件作为 API。

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

我遇到了错误

Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" Replies ]*ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}} "):`

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

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