579
回編集
差分
提供: fukudat.net
ナビゲーションに移動検索に移動
編集の要約なし
export class AppModule { }
</pre>
== Tips ==
=== 条件付き要素 ===
ある条件が成り立っている場合にのみ表示される HTML要素が作りたいときは、<code>*ngIf</code>を使う。
コンポーネントのスニペット
<pre>
...
export class XxxComponent implements OnInit {
flag: boolean; // この値が True のとき、要素が表示される。
...
}
</pre>
テンプレートのスニペット
<pre>
...
<div *ngIf="flag">
this.flag が true のときのみ表示
</div>
<div *ngIf="!flag>
this.flag が false のときのみ表示
</div
</pre>
さらに、条件が成り立っているときと成り立っていないときに、表示されるHTML要素を切り替えることもできる。
=== 繰り返し要素 ===
コンポーネントの属性が配列（ここでは array とする)があった時、その要素ごとに HTML要素が作りたいときは <code>*ngFor</code>を使う。
例えば、<nowiki><list> (<ul>, <ol>)</nowiki>の中の<nowiki><li></nowiki>とか、<nowiki><table></nowiki>の中の<nowiki><tr></nowiki>など。
コンポーネント (xxx.component.ts) のスニペット
<pre>
export class XxxComponent implements OnInit {
array: SomeClass[]; // 繰り返しを作るデータ。型はなんでもよい。
}
</pre>
テンプレート (xxx.component.html) のスニペット
<pre>
<ul>
<li *ngFor="let element of array">{{ element.field }}
</ul>
</pre>
綺麗なテーブルは[[#table|table]]参照。
[[Category:Programming]]
