iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0
Modern Web

Angular - 從零開始系列 第 15

Angular - 從零開始 - Day15 - 結構型指令 ngFor

  • 分享至 

  • xImage
  •  

angular

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


上一篇
Angular - 從零開始 - Day14 - 結構型指令 ngSwitch
下一篇
Angular - 從零開始 - Day16 - @injectable 裝飾器與注入 HttpClient 服務元件
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言