元素[重复]上的*ngIF和*ngFor

Question

我遇到需要 *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>

我想显示/隐藏对象是否包含设置为 true 的可见值。我怎样才能做到这一点？

Answer 1

您还可以使用模板元素：

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

这对你有用。

Answer 2

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

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

但是这个将在 html 中解析。

Answer 3

您可以使用<代码>

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

它不会添加到DOM中。