正文
@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": "电子产品"
}
]
}
