網頁

▼

2019/6/16

Angular 使用*ngFor來顯示陣列內容

本篇介紹如何在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專案，畫面如下。




參考：

沒有留言:

張貼留言