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 输出属性的更多相关文章

  1. angular 输入属性@Input , 输出属性@Output , 中间人模式

    1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...

  2. Angular2 组件与模板 -- 输入和输出属性

    Input and Output properties 输入属性是一个带有@Input 装饰器的可设置属性,当它通过属性绑定的形式被绑定时,值会"流入"到这个属性. 输出属性是一个 ...

  3. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  4. angular常用属性大全

    Angular元素属性大全 addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元 ...

  5. 解决引用类型为什么打出的是地址值,又怎么改成输出属性值(toString()底层)

    一丶toString的源码解析: 一丶object的toString的源码解析: 集合中toString源码分析: 小结: 改成输出属性值 在父类中重写toString();方法 快捷键:Alt+In ...

  6. 在checkbox中使用.prop; angular中属性的值使用变量问题

    1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return  false就能阻止点击则改变状态的默认行为 ...

  7. FillConsoleOutputAttribute 函数--指定区域填充控制台输出属性

    FillConsoleOutputAttribute函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms682663(v= ...

  8. angular的属性绑定

    1. 图片地址属性绑定 html文件 <img [src]="imgUrl"> ts文件 export class ProductComponent implement ...

  9. angular 输入属性

    import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-order', templa ...

随机推荐

  1. mongdb与mysql的联系和区别

    与关系型数据库相比,MongoDB的优点:①弱一致性(最终一致),更能保证用户的访问速度举例来说,在传统的关系型数据库中,一个COUNT类型的操作会锁定数据集,这样可以保证得到“当前”情况下的精确值. ...

  2. Rest之路 - Rest架构中的重要概念(二)

    状态无关性 Rest 架构中不维持client,resource and request 的状态,我们通常称 Rest 服务是状态无关的.基于此的优势是为设计Rest架构提供了简便:每一个请求可以被完 ...

  3. TCP与UDP比较 以及并发编程基础知识

    一.tcp比udp真正可靠地原因 1.为什么tcp比udp传输可靠地原因: 我们知道在传输数据的时候,数据是先存在操作系统的缓存中,然后发送给客户端,在客户端也是要经过客户端的操作系统的,因为这个过程 ...

  4. 安全测试回顾(一)补充:burp 的基本操作

    浏览器设置; 拦截请求: Spider 伪造请求: 对这个url 伪造请求 拦截一个页面后,进入攻击模块 sniper  两个参数值 保证一个不变  另一个 进行枚举 battering ram 两个 ...

  5. java成神之——集合框架之ArrayList,Lists,Sets

    集合 集合种类 ArrayList 声明 增删改查元素 遍历几种方式 空集合 子集合 不可变集合 LinkedList Lists 排序 类型转换 取交集 移动元素 删除交集元素 Sets 集合特点 ...

  6. java - 判断 字符串是否为空

    java - 判断 字符串是否为空 方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低.1:if(s == null || s.equals(""));方法二: 比较字符 ...

  7. java 删除文件夹 / 删除某文件夹下的所有文件

    import java.io.File; /*************************删除文件夹delFolder / 删除文件夹中的所有文件delAllFile *start******** ...

  8. 用exp、dmp导入导出用户到同一个实例下时,类型type会有问题

    oralce的type都有唯一id,在同一个实例下,通过导入导出方法创建type时,会有唯一性问题 最好的解决方法使用impdb,expdb的方式导入导出 用oid=n解决. 实在不行,可用稍微麻烦的 ...

  9. Window setInterval() 方法

    Window 对象 转自:https://www.w3cschool.cn/jsref/met-win-setinterval.html 定义和用法 setInterval() 方法可按照指定的周期( ...

  10. 关于jquery在页面初始化时radio控件选定默认值的问题

    网上找了很多资料,都是比较旧版本的方法,新版的jquery都已经抛弃了. 正确的代码是 $('input:radio[name="statusRadios"][value=&quo ...