码迷,mamicode.com
首页 > Web开发 > 详细

@angular/cli项目构建--httpClient

时间:2017-11-12 13:29:13      阅读:459      评论:0      收藏:0      [点我收藏+]

标签:common   price   苹果   size   des   ini   css   电子产品   mod   

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

标签:common   price   苹果   size   des   ini   css   电子产品   mod   

原文地址:http://www.cnblogs.com/Nyan-Workflow-FC/p/7821401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!