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

Posted 2023-02-22

【中文标题】<td></td> 元素上的 *ngIf 和 *ngFor [重复]

【英文标题】：*ngIf and *ngFor on <td></td> element [duplicate]

【发布时间】：2017-04-13 03:46:06

【问题描述】：

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

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

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

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

【参考方案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>