* ngIfと* ngFor on</td>要素

私は、同じ要素に* ngIfと* ngFor指示が必要な状況があります。私はstackoverlowで多くの答えを見つけましたが、このタイプの状況については何も見つかりませんでした。* ngIfと* ngFor on</td>要素

私は、オブジェクトの配列をループして、動的ヘッダーにセルを書き込みしていたテーブルを持っている：

<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に見えるセットが含まれている場合は/非表示を示したいと思います。どうすればこれを達成できますか？

出典

2016-11-29 Igor Janković

これには、<ng-container>ヘルパーエレメントを使用できます。

DOMに追加されません。

出典

2016-11-29 08:24:26

グレート答えngclass使用することができます。ありがとうございました。この状況では、ちょうどng-containerであることを少し説明してください。私はコンポーネント内での継承のためにこれを使用しました。 –

誰かがテーブルタグに問題がある場合にはうまく動作します。もう1つの選択肢は、テーブルをdivタグで置き換えることです –

クールな回答 - すべての作品。私はちょうどこのAng 2アプローチが完全なbs lolであると言います。 Y Uさんですか？ – Marko

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

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

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

出典

2016-11-29 08:32:53

またテンプレート要素を使用することができます。

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

これはあなたのために動作します。

出典

2016-11-29 08:58:33

BTWこれは4番目の数字で今や「」と呼ばれています。 – msanford

また、その

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

出典

2016-11-29 09:36:17 Sriram

* ngIfと* ngFor on​​</td>要素

答えて

関連する問題