Question

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

API是Twitter数据，我要对其运行条件的字段之一是“回复”。如果没有答复，我想将“ 0”替换为“-”。

我遇到错误

在一个元素上不能有多个模板绑定。仅使用带有*（“答复 ] * ngIf =“ hashtags.replies <1;否则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>

出现此错误的原因是，您的不能在同一DOM上放置2条结构指令

在您的代码中，您在同一*matCellDef上使用了*ngIf和<td>。

Answer 2

有什么原因不能直接在插值中执行条件运算吗？

<td mat-cell *matCellDef="let hashtags">{{hashtags.replies > 0 ? hashtag.replies : '-'}}</td>

Answer 3

您可以这样操作... xd

<ng-container matColumnDef="estadoRevision">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Revision</mat-header-cell>
    <mat-cell *matCellDef="let element">
        <td *ngIf="element.a === 0"> ejemplo </td>
        <td *ngIf="element.a === 1"> ejemplo </td>
    </mat-cell>
</ng-container>

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

3 个答案: