首页 文章

* ngIf和* ngFor on <td> </ td>元素[复制]

提问于
浏览 次
25

这个问题在这里已有答案：

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

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

<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 . 我怎样才能做到这一点？

angular angular2-directives

4 回答

  • 2

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

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

    它没有添加到DOM中 .

    回复于
  • 69

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

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

    但是这个将在html中解析 .

    回复于
  • 2

    您也可以使用 template 元素：

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

    这对你有用 .

    回复于
  • 9

    您也可以使用ngclass

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

相关问题