TypeScript Http请求

1、ts 文件

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}

interface WeatherForecast {
  dateFormatted: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

2、html 文件

Weather forecast

This component demonstrates fetching data from the server.

Loading...


  

    

      
Date
      
Temp. (C)
      
Temp. (F)
      
Summary
    
  
  

    

      
{{ forecast.dateFormatted }}
      
{{ forecast.temperatureC }}
      
{{ forecast.temperatureF }}
      
{{ forecast.summary }}