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": "电子产品" ???} ?]}
@angular/cli项目构建--httpClient
原文地址:http://www.cnblogs.com/Nyan-Workflow-FC/p/7821401.html