web-dev-qa-db-ja.com

<td> </ td>要素の* ngIfおよび* ngFor

同じ要素に* 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に設定されたvisibleが含まれている場合、表示/非表示にしたい。どうすればこれを達成できますか？

angularangular2-directives
32
Igor Janković

そのために<ng-container>ヘルパー要素を使用できます。

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

DOMには追加されません。

83
Günter Zöchbauer

GünterZöchbauerの答えは素晴らしいです。また、もう1つの解決策を見つけました。

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

ただし、これはhtml内で解析されます。

10
Igor Janković

template要素も使用できます：

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

これはあなたのために働くでしょう。

2
Avnesh Shakya

Ngclassを使用することもできます

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