Angular *ngIf和*NGF用于on<；td></td>；要素

在同一个元素上，我需要*ngIf和*ngFor指令。我在下面的列表中找到了很多答案，但是对于这种情况，没有一个答案

我有一个表，在其中我循环遍历对象数组，并在标题中动态写入单元格：

 <table border="1" width="100%">
        <thead>
            <tr>
                <td *ngFor="let item of headerItems" *ngIf="item.visible">{{ item?.name }}</td>
            </tr>
        </thead>
        <tbody>
            ...
        </tbody>
    </table>

{{item？.name}
...

我想显示/隐藏对象是否包含设置为true的visible。如何实现这一点？

您可以使用

辅助元素来实现这一点

{{item？.name}

---

它没有添加到DOM中。

Günter Zöchbauer的答案很好。我还找到了另一个解决方案

<td *ngFor="let item of headerItems" [hidden]="!item.visible">{{ item?.name }}</td>

{{item？.name}

---

但是这个将在html中解析。

您也可以使用模板元素：

<template ngFor let-item [ngForOf]="headerItems ">
   <td *ngIf="item.visible">{{ item?.name }}</td>
</template>

{{item？.name}

---

这将适用于您。

您也可以使用ngclass进行此操作

 .hidecell{
     display:none;
  }
<td *ngFor="let item of headerItems"  [ngClass]="{hidecell:item.isVisible}">
 {{ item?.name }}
</td>

.hidecell{
显示：无；
}
{{item？.name}

回答得很好。非常感谢。你能解释一下在这种情况下，ng容器到底是什么吗。我用它在组件中进行转换。它可以很好地工作，以防有人在使用表标记时遇到问题。另一种选择是用div-tagCool答案替换表-一切正常。我只想插嘴说这个Ang 2方法是完全的bs lol。你做这个Ang吗？当你了解幕后发生的事情时，你无法想象它是任何其他方式；-）。检查有关结构指令的教程。我根本没有使用AngularJS，因此我没有非常具体的期望。效果很好，谢谢！顺便说一句，这在angular 4中现在称为

。