動的なボタンによってトリガされた動的divを角2で表示するにはどうすればいいですか？

Question

私はこのイベントをクリックイベントといくつかのプレーンなjavascriptを使って取得しましたが、これはもっと良い方法です。

私はいくつかの動的行とそれに対応する動的ボタンをngForを使って生成しています。

彼らは次のようになります。

<div *ngFor="let section of data.order?.sections" id="{{section.class}}Detail" class="{{section.name | lowercase | removeAmpersand | removeSpaces }}">Random Text Here</div> 

そして他の場所ページでもngForを使用して生成されたアンカータグのリストがあります：

<a (click)="showDetails($event)" id="{{section.name | lowercase | removeAmpersand | removeSpaces }}"><span class="icomoon icomoon-eye"></span> Detail/a> 

私の質問が好まれているものであり、 divを表示して非表示にする方法は？ divのそれぞれは、display: noneのCSSプロパティで始まり、私はそれをトグルすることを望んでいました。代わりに、私はdivのIDを取得する機能を実行するために、クリックイベントを使用していますし、私はこのようになりますいくつかの純粋なJavaScriptを持っている：

myDiv.style.display = myDiv.style.display === '' ? 'block' : ''; 

私は何をすべきことは、好ましい方法でしょうか？

Answer 1

CSSクラスを条件付きで要素に追加できます。

<div class="standardclass" [class.additionalclass]="showFlag"></div> 

additionalclassよう 何かが表現showFlagがtrueの場合にのみ追加される別のCSSクラスです。フラグだけではなく、任意のjs式にすることができます。

*ngIfを使用して、条件付きでDOMから要素を完全に追加または削除することもできます。

「角度2テンプレートの構文」を検索する

Answer 2

あなたはモデルにforeachのを結合し、その後、あなたのセクションのためのモデルを作成することができ、そしてモデルの一部として、あなたが使用することができ、視認性のためのブール値を持つことができますあなたのループの中で隠すか、または表示することを決めました。

ボタンが表示されたブール値を切り替えるため、モデルが変更されたときにAngular2を使用してUIを更新できます。

コードをこのスタイルに変更するのは少し手間がかかりますが、利点としては、より洗練されたhtml、潜在的により優れた保守性と単体テスト能力が挙げられます。