获取后台数据-Http

news

html

<button (click)="getDate()">click_it</button>
<br>
<ul>
  <li *ngFor="let item of list">
    {{item.title}}
  </li>
</ul>

复制代码

ts

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

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {

  public list:any[] = [];

  constructor(public http:HttpClient) { }

  ngOnInit() {
  }

  getDate(){
    let api = "http://a.itying.com/api/productlist";
    this.http.get(api).subscribe((response:any)=>{

      this.list = response.result;

      console.log(this.list);

    });
  }

}

复制代码

app.module.ts

import { HttpClientModule  } from '@angular/common/http';

  imports: [
    BrowserModule,
    HttpClientModule
  ],
复制代码