2017-02-11 50 views
0

if(colValue == "Id")の条件によっては、テーブルの行の最後の列 'Id'を非表示にしたいだけです。以下angular2 - hiddenを使って行の列を非表示にする

<thead> 
<tr> 
    <th *ngFor="let colValue of headerRow" [hidden]="colValue == Id">{{colValue}}</th> 
</tr> 

行列です。

いいえ|日付|名前|タイプ|ステータス|バランス|コメント| ID |

私は隠したくないが隠したい。どうすればそれを達成できますか?おかげ

答えて

0
テンプレートに

.hide { 
    display: none; 
} 

その要素に、その後CSSスタイルバインディングクラスのCSSを作成することができ

<th [class.hide]="colValue == Id"></th> 

hiddenプロパティの使用を避け、それ多分ホストにバインドするとバグが発生します。 hiddenは、display: none !importantを追加します。

0

テーブルコンポーネントを作成しようとしています。私はそれをしないことをお勧めします。あなたはちょうどhtmlページの代わりにjavascriptでgui releatedコードをたくさん持つことに終わるかもしれません。なぜそれを隠す必要があるのか​​尋ねることはできますか?どうして* ngで十分ではないのですか?

+0

私は行のいずれかをクリックすると、私は、すべてのテーブルの行の最後の列に格納されている 'ID'の値を取得している場合、私はさらに多くの行があります。その 'id'から私はより多くの結果を表示します(ドリルダウンのような)。 –

+0

これを行うにはhtml要素を持つ必要はありません。ここに例があります。 ''とコントローラ内で: '$ n.png.onRowClicked = function(row){var id = row.Id}'となります。コントローラーに仕事をさせる –

関連する問題