@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": "电子产品"
}
]
}
@angular/cli项目构建--httpClient的更多相关文章
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...
- @angular/cli项目构建--路由3
路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...
- @angular/cli项目构建--Dynamic.Form
导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...
- @angular/cli项目构建--animations
使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...
- @angular/cli项目构建--interceptor
JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...
- @angular/cli项目构建--路由2
app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...
- @angular/cli项目构建--路由1
app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...
- @angular/cli项目构建--Dynamic.Form(2)
form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...
随机推荐
- ALE和IDocs
转自:http://blog.163.com/shenshengqge@126/blog/static/820512902011101152518635/ 作为目前ERP市场上最为领先的应用系统之一, ...
- SQL SERVER 2005 Express版, 精简版 下载
Microsoft SQL Server 2005 Express Edition(数据库) https://www.microsoft.com/zh-CN/download/details.as ...
- LeetCode:矩阵置零【73】
LeetCode:矩阵置零[73] 题目描述 给定一个 m x n 的矩阵,如果一个元素为 0,则将其所在行和列的所有元素都设为 0.请使用原地算法. 示例 1: 输入: [ [1,1,1], ...
- LeetCode:二叉树的锯齿形层次遍历【103】
LeetCode:二叉树的锯齿形层次遍历[103] 题目描述 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如:给定二叉树 ...
- Linux系统资源查询命令(cpu、io、mem)
cpu/mem: 1. 指定pid top -p pid1,pid2,... 2. top排序 先top,然后 输入大写P,则结果按CPU占用降序排序.输入大写M,结果按内存占用降序排序. io: ...
- 014_HDFS存储架构、架构可靠性分析、副本放置策略、各组件之间的关系
1.HDFS存储架构
- 在Java中调用Python代码
极少数时候,我们会碰到类似这样的问题:与A同学合作写代码, A同学只会写Python,不熟悉Java ,而你只会写Java不擅长Python,并且发现难以用Java来重写对方的代码,这时,就不得不想方 ...
- verilog FAQ(zz)
1. What is the race condition in verilog? Ans :The situation when two expressions are allowed to exe ...
- Spring Boot2.0之 整合XXL-Job
参考git上面的 springboot demo 创建maven工程: pom: <project xmlns="http://maven.apache.org/POM/4.0.0&q ...
- 【bzoj1258】三角形tri[CQOI2007](乱搞)
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1258 这是道很意思的大水题,虽然看上去一脸懵逼,但画张图出来看看也可以窥见一丝端倪. ...