Question

我有一种情况，我需要在同一元素上使用* 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>

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

Answer 1

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

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

它没有添加到DOM中。

Answer 2

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

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

但是这个将在html中解析。

Answer 3

您也可以使用模板元素：

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

这对你有用。

Answer 4

你也可以使用ngclass

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

* ngIf和* ngFor on element

4 个答案: