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 ...
随机推荐
- python之operator模块
python3中已经没有cmp函数,被operator模块代替,在交互模式下使用时,需要导入模块. 在没有导入模块情况下,会出现 提示找不到cmp函数了,那么在python3中该如何使用这个函数呢? ...
- C++深度解析教程学习笔记(4)C++中的新成员
1. 动态内存分配 (1)C++通过 new 关键字进行动态内存申请,是以类型为单位来申请空间大小的 (2)delete 关键字用于内存释放 ▲注意释放数组时要加[],否则只释放这个数组中的第 1 个 ...
- oracle:RETURNING 子句
RETURNING 自己通常结合DML 语句使用.(INSERT UPDATE DELETE) 使用方法: UPDATE table_name SET expr1 RETURNING column_n ...
- 15-EasyNetQ之对延迟消息插件的支持
RabbitMQ延迟消息插件仍然在实验阶段.你使用这个功能要自担风险. RabbitMQ延迟消息插件为RabbitMQ增加了新的交换机类型,允许延时消息投递. EasyNetQ为交换机通过定义一种新的 ...
- ubuntu安装vsftpd
使用以下命令安装vsftpd: apt-get install vsftpd 安装完成后,文件服务器已经开启了. 然后就可以连接,可以使用xftp等工具,在上传和下载的时候要注意权限,不然会失败.
- RT2870移植到s3c2416后续验证无线…
我的无线网卡显示的事ra0,所以把下面的wlan0换成ra0即可:视自己的情况而定 1. 打开无线网卡电源 iwconfig wlan0 txpower on 2. 列出区域内的无线网络 iwlist ...
- SpringMVC总结一:快速入门
MVC: MVC是一种架构模型,本身没有什么功能,只是让我们的项目结构更加合理,流程控制更加清晰,一般包含三个组件: **Model(模型)**:数据模型,用于提供要展示的数据.一般包含数据和行为 ...
- 2-3 JAVA内存模型
- shell 别名alias
在这说下 shell 命令 alias 别名 看个人爱好 设置. 直接执行命令 显示当前所有别名 alias 别名='新的别名' 该命令在当窗口关闭以后 会失效 想要永久生效 需要在 ...
- css 样式文字溢出显示省略号
在table中使用溢出样式,table样式要设置为”table-layout: fixed“,即<table style="table-layout: fixed;"> ...