Anglar 6でHTTPを使用して、サービス端末データを要求するステップの詳細解

第一歩
appiインターフェースの住所、例えばhttps://api.example.com/api/を用意してください。
第二のステップ
ルートコンポーネントapp.com mponents.tsにHttpClientModuleモジュールを導入します。

// app.components.ts
import {HttpClientModule} from "@angular/common/http"; //  HttpClientModule   
imports: [
 BrowserModule,
 AppRoutingModule,
 HttpClientModule //  HTTP  
],

第三歩
コンポーネントでHTTPモジュールを使ってリモートサーバにデータを要求する
1.HTTPモジュールの導入

// list.components.ts
import { HttpClient } from "@angular/common/http" //   HttpClient

2.コンポーネントの構造関数におけるHttpClientの実証

constructor(private http:HttpClient){}

3.データを受信するための変数を作成するpublic anyList:any4.HTTPのget方法でデータを要求する

ngOnInit() { //      
 this.http.get("https://api.example.com/api/list")
   .subscribe(res=>{ this.anyList = res })
}
// get                ，             ，      json  。
// subscribe    get         。   res            。    res      anyList  。

5：フロント出力

// list.component.html

<ul *ngFor="let v of anyList">     anyList    
 <a routerLink="/post/{{v.id}}">    routerLink angular a    
  <img src="{{v.thumb}}" alt="">    v.thumb   anyList        thumb   
  <h3>{{v.name}}</h3>
 </a>
</ul>

フロントページを開けば、出力されたデータ情報が見えます。
締め括りをつける
以上述べたのは、Anglar 6でHTTPを使ってサーバーのデータを要求する手順の詳細な説明です。皆さんに助けてほしいです。もし何か質問があれば、メッセージをください。編集者はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。