* ngIf и * ngFor on <td></td> элемент

У меня есть ситуация, когда мне нужна директива 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. Как я могу достичь этого?

Ответ 1

Для этого можно использовать вспомогательный элемент <ng-container>.

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

Он не добавлен в DOM.

Ответ 2

Ответ Гюнтера Цохбауэра велик. Я также нашел еще одно решение.

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

Но этот будет анализироваться внутри html.

Ответ 3

Вы также можете использовать ngclass для

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

Ответ 4

Вы также можете использовать шаблон:

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

Это будет работать для вас.