「Angular 2 」*ngForでオブジェクト(object)の要素を出力する

2019年11月15日

1. Siteクラスの定義
ファイル名:app/site.ts
定義内容下記
export class Site {
constructor(
public id: number,
public name: string) { }
}

2.Siteクラスの要素出力
ファイル名:app/app.component.ts
処理下記
import { Component } from '@angular/core’;
import { Site } from './site’;

@Component({
selector: 'my-app’,
template: `
<h1>{{title}}</h1>
<h2>site: {{mySite.name}}</h2>
<p>homepage:</p>
<ul>
<li *ngFor="let site of sites">
{{ site.name }}
</li>
</ul>
`
})

export class AppComponent {
title = 'sitelists’;
sites = [
new Site(1, 'yahoo’),
new Site(2, 'Google’),
new Site(3, '2ch’),
new Site(4, 'line’)
];
mySite = this.sites[0];
}