Angular 2 データ表示
この章では、データをユーザーインターフェースに表示する方法を紹介します。以下の3つの方法を使用できます。
- 補間式を使用してコンポーネントのプロパティを表示する
- NgFor を使用して配列型プロパティを表示する
- NgIf を使用して条件に応じた表示を実現する
補間式を使用してコンポーネントのプロパティを表示する
コンポーネントのプロパティを表示するには、補間が最も簡単な方法です。形式は次のとおりです。{{プロパティ名}}。
以下のコードはAngular 2 TypeScript 環境設定に基づいて作成されています。この章でソースコードをダウンロードし、以下に挙げるいくつかのファイルを変更できます。
app/app.component.ts ファイル：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>好きなウェブサイト:{{mySite}}</h2>
`
})
export class AppComponent {
title = 'サイトリスト';
mySite = 'サンプル';
}
Angular はコンポーネントから title と mySite プロパティの値を自動的に抽出し、ブラウザに表示します。表示情報は次のとおりです。
注意：テンプレートはバッククォート (`) で囲まれた複数行の文字列であり、シングルクォート (') ではありません。
ngFor を使用して配列プロパティを表示する
複数のサイトをループ出力することもできます。以下のファイルを変更します。
app/app.component.ts ファイル：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>好きなウェブサイト:{{mySite}}</h2>
<p>サイトリスト:</p>
<ul>
<li *ngFor="let site of sites">
{{ site }}
</li>
</ul>
`
})
export class AppComponent {
title = 'サイトリスト';
sites = ['サンプル', 'Google', 'Taobao', 'Facebook'];
mySite = this.sites[0];
}
コードでは、テンプレート内で Angular の ngFor ディレクティブを使用して sites リストの各エントリを表示しています。*ngFor の前のアスタリスク (*) を忘れないでください。
変更後、ブラウザには次のように表示されます。
この例では ngFor は配列をループしていますが、実際には ngFor は任意の反復可能なオブジェクトを反復処理できます。
次に、app ディレクトリに site.ts ファイルを作成します。コードは次のとおりです。
app/site.ts ファイル：
export class Site {
constructor(
public id: number,
public name: string) { }
}
上記のコードでは、コンストラクタと id および name という2つのプロパティを持つクラスを定義しています。
次に、Site クラスの name プロパティをループ出力します。
app/app.component.ts ファイル：
import { Component } from '@angular/core';
import { Site } from './site';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>好きなウェブサイト:{{mySite.name}}</h2>
<p>サイトリスト:</p>
<ul>
<li *ngFor="let site of sites">
{{ site.name }}
</li>
</ul>
`
})
export class AppComponent {
title = 'サイトリスト';
sites = [
new Site(1, 'サンプル'),
new Site(2, 'Google'),
new Site(3, 'Taobao'),
new Site(4, 'Facebook')
];
mySite = this.sites[0];
}
変更後、ブラウザには次のように表示されます。
NgIf による条件付き表示
NgIf を使用して、指定した条件のデータを出力するように設定できます。
次の例では、サイト数が3つ以上の場合にメッセージを出力するように判定します。以下の app.component.ts ファイルを変更します。コードは次のとおりです。
app/app.component.ts ファイル：
import { Component } from '@angular/core';
import { Site } from './site';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>好きなウェブサイト:{{mySite.name}}</h2>
<p>サイトリスト:</p>
<ul>
<li *ngFor="let site of sites">
{{ site.name }}
</li>
</ul>
<p *ngIf="sites.length > 3">好きなサイトがたくさんあります!</p>
`
})
export class AppComponent {
title = 'サイトリスト';
sites = [
new Site(1, 'サンプル'),
new Site(2, 'Google'),
new Site(3, 'Taobao'),
new Site(4, 'Facebook')
];
mySite = this.sites[0];
}
変更後、ブラウザには次のように表示され、下部にヒント情報が追加されます。
その他の拡張