用途

可以迴圈生成HTML片段

物件設定

export class Member {
  id: number;
  name: string;
}

//Member クラスのようにプロパティーを強制する
const MEMBERS: Member[] = [
  {id: 11, name: '武山学'},
  {id: 12, name: '初音ミク'},
  {id: 13, name: '桐山零'},
  {id: 14, name: '三角竜之'},
  {id: 15, name: '羽生結弦'},
  {id: 16, name: '佐々木希'},
  {id: 17, name: '松崎はとり'},
  {id: 18, name: '半沢直樹'},
  {id: 19, name: '伊藤幸'},
  {id: 20, name: '桜田深雪'}
];

//資料的設定一定要在@Component上方，否則會噴錯
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})


// プロパティーを定義する
export class AppComponent  {
  title='自社社員名簿';
  members = MEMBERS; 
  
}

HTML模板

ngFor語法：let <自定義的名稱（可自訂）> of <變數名（固定）>

<h1>{{title}}</h1>
<h2>社員一覧</h2>
<ul>
  <li *ngFor="let member of members">
    <spanclass="badge">{{member.id}}</span>
    {{member.name}}
  </li>
</ul>