3-1.Angular 入門教學 - 利用HttpClient取回後端資料

影片講解

基本上接下來的示範，都必須要跟後端溝通，才能完整的示範出來

所以現在就要先教如何去跟後端溝通，那這次先看如何從後端把資料要回來的方法

首先因為還沒有後端，所以就現在assets下建立一個檔案todo.json

todo.json

[
    {
        "Status": true,
        "Thing": "第一件事情1",
        "Editing": false
    },
    {
        "Status": false,
        "Thing": "第二件事情3",
        "Editing": false
    },
    {
        "Status": false,
        "Thing": "第三件事情3",
        "Editing": false
    }
]

那這邊每個事情後面多了一個數字，是為了區別我們之前寫死程式裡的資料，來明確知道，等等我們取回來的檔案，真的是從這個檔案娶回來的

接著我們要使用HttpClient的套件，但在使用這個套件之前我們必須到app.module.ts裡imports進來HttpClientModule才可以使用，

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,//引入這個
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接著回到app.component.ts在 constructor裡進行宣告HttpClient，那在app.component.ts裡預設是沒有的，所以要自己加

constructor(private http: HttpClient) { }

接著我們就可以使用http來取得後端的資料，那在這個範例是先取得我們todo.json裡的資料

在這之前我們要把一開始寫死宣告的物件清掉

todoDataList: Todo[] = [];

然後接著需要再ngOnInit()裡做讀取資料這件事，那在app.component.ts預設也是沒有的，所以我們要自己加上

export class AppComponent implements OnInit {
  todoDataList: Todo[] = [];
  constructor(private http: HttpClient) { }
  ngOnInit(): void {
  }
}

那要讓放在ngOnInit裡的程式會在這個Component初始化時先執行，不過要正常運作，要先讓這個class先implements OnInit，如上

接著我們就要開始取得後端資料，寫法如下

ngOnInit(): void {
  this.http.get<Todo[]>('assets/todo.json').subscribe(data => {
    this.todoDataList = data;
  });
}

這邊的話使用http的get，然後<>中放的是你取回來的資料的型別，這邊的話就放todo[]，接著()中就是放你後端的網址路徑，不過這邊我們先讀放在assets/todo.json的檔案

最後在使用subscribe取得資料括弧中的data就是取回來的資料，所以我們之後就將我們宣告的todoDataList物件等於data，就完成了

最後顯示的結果如下

確實有後面的數字，代表是從我們的todo.json取回來的資料

那想要聽更多的廢話，可以看影片XD

新手發片分享，若有錯誤，煩請告知修正，感謝🙏

範例檔：下載