@angular/cli项目构建--httpClient

app.module.ts update

imports: [
    HttpClientModule]

product.component.ts

import {Component, OnInit} from ‘@angular/core‘;
import {HttpClient} from ‘@angular/common/http‘;
import {Observable} from ‘rxjs/Observable‘;
import * as _ from ‘lodash‘;

@Component({
  selector: ‘app-product‘,
  templateUrl: ‘./product.component.html‘,
  styleUrls: [‘./product.component.css‘]
})
export class ProductComponent implements OnInit {

  products: string[];

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    this.http.get(‘assets/json/product.json‘)
      .subscribe(data => {
        this.products = data[‘products‘];
      });
  }

}

assets/json/product.json add

{
  "products": [
    {
      "id": "1",
      "name": "第一个商品",
      "price": "899",
      "rating": "3.5",
      "desc": "苹果手机",
      "category": "电子产品"
    },
    {
      "id": "2",
      "name": "第二个商品",
      "price": "899",
      "rating": "4",
      "desc": "联想电脑",
      "category": "电子产品"
    }
  ]
}