Angular 筆記 - 結構型指令 ngFor

ngFor 的功能非常強大，也是使用非常頻繁的指令，時常會透過 API 取得 JSON 資料，並取出所需要顯示在網頁上的資訊。

練習重點

這邊有一支全台雨量的 API，要透過 ngFor 迴圈取得資料內容後渲染在網頁上。

複製 API 內容

本篇先不講到如何使用 AJAX 方式取得 API，先著重於 ngFor 的內容介紹，所以先將 API 的內容複製下來，放到 app.component.ts 裡面，並給予一個變數為 data。

在 app.component.html 中建立一個標籤裡面放入 ngFor。

<div *ngFor="let item of list"></div>

但因為我們命名的變數為 data，所以要將 list 改為 data，不然會無法取得 data 資料。

<div *ngFor="let item of data"></div>

跟在寫 JS 原生 for 語法雷同，這一行的意思大概是 item 是資料的變數，是從 data 這個地方來。

ngFor 的作用範圍

<div *ngFor="let item of data"></div>

ngFor 的作用範圍，就只有在這個 <div> 裡面而已，透過 ngFor 會在 data 資料中跑回圈，取出我們要的屬性資料內容，套用到 item 這個變數，並渲染在網頁上。

{
parameterName2: "24",
parameterUnit2: "C",
parameterName1: "多雲短暫陣雨或雷雨",
parameterUnit3: "C",
parameterName3: "23",
parameterValue1: "15",
locationName: "臺北市",
endTime: "2020-05-21T06:00:00+08:00",
startTime: "2020-05-21T00:00:00+08:00",
\_id: 1
}

這次我們資料的其中一筆物件內容如上，所以只要透過之前講過的四個資料繫結方法，就可以取得想要的資料內容。

所以 app.component.html 就會變這樣。

<div *ngFor="let item of data">
  <h3>{{item.locationName}}</h3>
  <p>最低溫：{{item.parameterName3}} °C</p>
  <p>最高溫：{{item.parameterName2}} °C</p>
  <p>天氣狀況：{{item.parameterName1}}</p>
</div>

這樣就可以取得想要的資料囉!

Demo

https://stackblitz.com/edit/angular-ivy-f15t2j?file=src%2Fapp%2Fapp.component.ts