我可以在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;否则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中的各种组合，但确实受困.

So it seems I cannot run NgIf and interpolate my data in the same element, I've tried all kinds of combinations in the HTML but I am real stuck.

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屋！