本篇介紹如何在Angular使用*ngFor在template中顯示陣列屬性的元素內容。
首先建立一個Angular專案。
專案建好後把app.component.html的預設內容刪除，修改如下
app.component.html
<h1>Angular <code>*ngFor</code> Demo</h1>
<app-stand-list></app-stand-list><!-- 用來顯示下面建立的StandListComponent的selector -->
<router-outlet></router-outlet>
在專案目錄下使用Angular CLI指令ng g c stand-list建立一個新的元件StandListComponent。
修改stand-list.component.ts如下。
stand-list.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-stand-list', // StandListComponent的selector名稱，也就是app.component.html中的<app-stand-list></app-stand-list>
templateUrl: './stand-list.component.html',
styleUrls: ['./stand-list.component.css']
})
export class StandListComponent implements OnInit {
// 新增屬性及內容
stands = [
{ name:'Star Platinum', user:'Jotaro Kujo' },
{ name:'Magician\'s Red', user:'Muhammad Avdol' },
{ name:'Hermit Purple', user:'Joseph Joestar' },
{ name:'Hierophant Green', user:'Noriaki Kakyoin' },
{ name:'Silver Chariot', user:'Jean Pierre Polnareff' },
{ name:'The Fool', user:'Iggy' }
]
constructor() { }
ngOnInit() {
}
}
修改stand-list.component.html如下，使用*ngFor把StandListComponent.stands陣列中每一筆內容迴圈顯示出來。
stand-list.component.html
<h3>JoJo's Bizarre Adventure - Stardust Crusaders - Stands</h3>
<div *ngFor="let stand of stands">
<div>{{stand.name}} - {{stand.user}}</div>
</div>
*ngFor其實只是語法糖(syntactic sugar)，在Angular的語法糖寫法前會加一個星號(*)。
實際上原本的寫法如下：
<ng-template ngFor let-stand [ngForOf]="stands">
<div>{{stand.name}} - {{stand.user}}</div>
</ng-template>
也就是Angular碰到如*ngFor，*ngIf語法糖寫法時，終究會轉譯成<ng-template>。
*ngFor屬於Structural Directives，用來將集合屬性中的每個元素顯示在Component的template上。
啟動Angular專案，畫面如下。
參考：
沒有留言:
張貼留言