<td></td> 元素上的 *ngIf 和 *ngFor [重复]答案

【问题标题】：*ngIf and *ngFor on <td></td> element [duplicate]<td></td> 元素上的 *ngIf 和 *ngFor [重复]
【发布时间】：2017-04-13 03:46:06
【问题描述】：

我有一种情况，我需要在同一个元素上使用 *ngIf 和 *ngFor 指令。我在 stackoverlow 上找到了很多答案，但没有针对这种情况的答案。

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

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

如果对象包含可见设置为真，我想显示/隐藏。我怎样才能做到这一点？

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

您可以为此使用 <ng-container> 辅助元素。

<ng-container *ngFor="let item of headerItems" >
 <td *ngIf="item.visible">{{ item?.name }}</td>
</ng-container>

它没有添加到 DOM 中。

【讨论】：

很好的答案。谢谢你。你能解释一下在这种情况下究竟什么是 ng-container 吗？我已经将它用于组件中的嵌入。
如果有人在使用表格标签时遇到问题，它可以正常工作。另一种选择是用 div 标签替换 table
很酷的答案 - 一切正常。我只想跳进去说这个 Ang 2 方法是完整的 bs 哈哈。你这样做吗？
当您了解幕后发生的事情时，您无法想象它会以任何其他方式发生 ;-)。查看有关结构指令的教程。我根本没有使用过 AngularJS，因此我没有非常具体的期望。
效果很好，谢谢！

【解决方案2】：

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

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

但是这个会在html里面解析。

【讨论】：

【解决方案3】：

您也可以使用 template 元素：

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

这对你有用。

【讨论】：

顺便说一句，现在在角度 4 中称为 <ng-template>。

【解决方案4】：

你也可以使用 ngclass

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

【讨论】：