@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( ...
随机推荐
- 【Network】DDoS攻击防御
DDoS(Distributed Denial of Service,分布式拒绝服务)攻击的主要目的是让指定目标无法提供正常服务,甚至从互联网上消失,是目前最强大,最难防御的攻击之一. 按照发起的方式 ...
- 剑指offer 面试4题
面试4题: 题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 解题代码一:二 ...
- OpenGL学习进程(6)第四课:点、边和图形(一)点
本节是OpenGL学习的第四个课时,下面介绍OpenGL点的相关知识: (1)点的概念: 数学上的点,只有位置,没有大小.但在计算机中,无论计算精度如何提高,始终不能表示一个无穷小的点 ...
- 树莓派打造对话机器人 Python(转)
工具列表 1. **树莓派**(型号不要求,本人使用的是3B) 2. **usb麦克风**(某宝有卖,我就不打广告了) 用来录音 3. **音响或者喇叭**(某宝也有卖) 用来播放 以上就是需要的工具 ...
- 0731 #Django rest framework
FBV:Function base viewsdef index(request): if request.method == 'POST': return HTTPrespons ...
- Python编程-多线程
一.python并发编程之多线程 1.threading模块 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性,因而不再详细介绍 1.1 开启线程的 ...
- Squid 反向代理配置
Squid 反向代理配置 1.删除主配置文件重写写入配置 rm -f /etc/squid/squid.conf 2.重新写入配置反向代理 vim /etc/squid/squid.conf # 监听 ...
- Java虚拟机的平台无关性与语言无关性
平台无关性 不同平台的不同java虚拟机,都执行同一种字节码文件,即Class文件 语言无关性 Java虚拟机不止能执行java程序,还有Clojure.Groovy.JRuby.Jython.Sca ...
- android开发之如何将一般应用变身系统级应用【转】
本文转载自:https://blog.csdn.net/zanelove/article/details/43953743 前提: ROOT过的手机 1,把代码编写好后,打包导出apk,copy到手机 ...
- [Android]开源中国源码分析之二---DrawerLayout
从启动界面到主界面之后的效果如图所示,采用的是v4包下的DrawerLayout, activity_main.xml文件如下: <!-- A DrawerLayout is intended ...