angular 输出属性
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-order-change',
templateUrl: './order-change.component.html',
styleUrls: ['./order-change.component.css']
})
export class OrderChangeComponent implements OnInit {
name = 'IBM';
count: number;
@Output()
price: EventEmitter<Product> = new EventEmitter();
constructor() { }
ngOnInit() {
setInterval(() => {
const product = new Product(this.name, * Math.random());
this.count = product.price;
this.price.emit(product);
}, );
}
}
export class Product {
constructor(public name: string, public price: number) { }
}
<p>
买{{count | number:'2.1-4'}}手{{name}}产品
</p>
import { Component } from '@angular/core';
import { Product } from './order-change/order-change.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
orderName: string;
count: number;
price: Product = new Product('', );
priceHandler(event: Product) {
this.price = event;
}
}
<app-order-change (price)="priceHandler($event)"></app-order-change>
{{price.name}}
{{price.price | number : '2.1-4'}}
angular 输出属性的更多相关文章
- angular 输入属性@Input , 输出属性@Output , 中间人模式
1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...
- Angular2 组件与模板 -- 输入和输出属性
Input and Output properties 输入属性是一个带有@Input 装饰器的可设置属性,当它通过属性绑定的形式被绑定时,值会"流入"到这个属性. 输出属性是一个 ...
- Angular 6.X CLI(Angular.json) 属性详解
Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...
- angular常用属性大全
Angular元素属性大全 addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元 ...
- 解决引用类型为什么打出的是地址值,又怎么改成输出属性值(toString()底层)
一丶toString的源码解析: 一丶object的toString的源码解析: 集合中toString源码分析: 小结: 改成输出属性值 在父类中重写toString();方法 快捷键:Alt+In ...
- 在checkbox中使用.prop; angular中属性的值使用变量问题
1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return false就能阻止点击则改变状态的默认行为 ...
- FillConsoleOutputAttribute 函数--指定区域填充控制台输出属性
FillConsoleOutputAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms682663(v= ...
- angular的属性绑定
1. 图片地址属性绑定 html文件 <img [src]="imgUrl"> ts文件 export class ProductComponent implement ...
- angular 输入属性
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-order', templa ...
随机推荐
- c#编写的基于TCP通信的微风IM 版本3 新年新UI
电商商模 背景:来源,产生运营模式:模式特点,服务对象,业务开展,赢利点,扩 张点,定价策略行业分析:市场分析:DX,企业,政策,经济,文化,技术 网站架构:频道,版块,功能体系 项目推广:地面推广, ...
- python's twenty ninthday for me 模块和包
模块 和 脚本的 区别: 如果一个py文件被导入了,就是一个模块. 如果这个py文件被直接执行,这个被直接执行的文件就是一个脚本. 模块:1,没有具体的调用过程.2,能对外提供功能. pyc文件: ...
- Win7开始菜单所在目录
C:\ProgramData\Microsoft\Windows\Start Menu\Programs 可在此目录下归类,建文件夹
- cxf和axis2使用有感
CXF框架 个人不喜欢使用wsimport工具: 1.考虑到远端的服务接口发生变化,本地的接口还需要重新同步下 2.项目中无端多了些冗余的代码 这样我们选择cxf的动态调用接口吧,使用DynamicC ...
- ubuntu 14.04 安装压缩包版mysql
既有环境: 1)下载MySQL Community Server 5.6.17 压缩版(mysql-5.6.17-linux-glibc2.5-x86_64.tar.gz) 2)安装目录: /opt/ ...
- Splay树分析
简述 Splay树是一种二叉查找平衡树,其又名伸展树,缘由是对其进行任意操作,树的内部结构都会发生类似伸张的动作,换言之,其读和写操作都会修改树的结构.Splay树拥有和其它二叉查找平衡树一致的读写时 ...
- codeforce468DIV2——E. Game with String
题目 Vasya and Kolya play a game with a string, using the following rules. Initially, Kolya creates a ...
- 【bzoj1787】[Ahoi2008]Meet 紧急集合
1787: [Ahoi2008]Meet 紧急集合 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 2466 Solved: 1117[Submit] ...
- mfs监控
web gui 监控 gui_info.jpg (143.72 KB, 下载次数: 83) gui_most.jpg (209.36 KB, 下载次数: 82) gui_master_info.jpg ...
- 高性能的城市定位API接口
如果不需要精准的定位,还有一种通过IP地址获取当前城市的方法,采用新浪的api接口. <script src="http://int.dpool.sina.com.cn/iplooku ...