ngFor 的功能非常強大,也是使用非常頻繁的指令,時常會透過 API 取得 JSON 資料,並取出所需要顯示在網頁上的資訊。
這邊有一支全台雨量的 API,要透過 ngFor 迴圈取得資料內容後渲染在網頁上。
本篇先不講到如何使用 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 這個地方來。
<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>
這樣就可以取得想要的資料囉!
https://stackblitz.com/edit/angular-ivy-f15t2j?file=src%2Fapp%2Fapp.component.ts