我可以在 Angular Material 表上放置 ngIf else 条件吗? [英] Can I put an ngIf else condition on a Angular Material table?

问题描述

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

I've followed the Angular docs here https://angular.io/api/common/NgIf to create an NgIf else conditional over my Material Table. It is reading remote JSON file as API.

API 是 twitter 数据，我想运行条件的字段之一是回复".如果没有回复，我想用-"代替0".

The API is twitter data and one of the fields I want to run condition on is 'replies'. If there are no replies, I want to replace the "0" with a "-".

我收到错误

不能在一个元素上有多个模板绑定.仅使用一个以 * (" 回复]*ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}}"):`

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>

推荐答案

尝试

    <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 个结构指令

The reason for getting this error is because your cant put 2 structural directives on same DOM

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

In your code, you were using *matCellDef and *ngIf on the same <td>.

这篇关于我可以在 Angular Material 表上放置 ngIf else 条件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！