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. xunsearch全文检索初体验

    目录 测试添加数据 测试搜索 简单搜索 稍微复杂的搜索 搜索建议 测试添加数据 ./Indexer.php --source=csv --clean demo 清空现有索引数据 ... 初始化数据源 ...

  2. PHP面向对象深入研究之【高级特性】

    静态属性 <?php class StaticExample { static public $aNum = 0; // 静态共有属性 static public function sayHel ...

  3. PL/SQL 训练03 --异常

    --程序员在开发的时候,经常天真的认为这个世界是完美的,用户如同自己般聪明,总能按照自己设想的方式--操作系统输入数据.但残酷的事实告诉我们,这是不可能的事情,用户总会跟我们相反的方式操作系统--于是 ...

  4. BugkuCTF WEB

    web2 打开链接,一大堆表情 查看源代码 得到 flag 文件上传测试 打开链接 选择 1 个 jpg 文件进行上传,用 burp 抓包改包 将 php 改为 jpg,发包 得到 flag 计算器 ...

  5. SVN安装和使用总结

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  6. nginx反向代理负载均衡初次配置

    反向代理,我个人理解是通过一台反向代理服务器,把客户端的把有请求按照一定的规则分发给后台的服务器.nginx作反向代理服务器的虚拟机配置如下: upstream itest { #正常情况下应该作如下 ...

  7. nat123安装启动教程帮助

    转自:http://www.nat123.com/Pages_17_291.jsp 本文就nat123安装启动可能遇到的问题及与安全狗影响处理. 下载安装nat123客户端安装包.第一次安装使用,可选 ...

  8. Hibernate XXX.hbm.xml 里的class标签的 schema 属性解释

    转自:https://blog.csdn.net/mym43210/article/details/30230173 1 <?xml version="1.0" encodi ...

  9. c++builder 程序升级到c++builder10Seattle

    c++builder 程序升级到c++builder10Seattle的一些技巧提示. http://community.embarcadero.com/blogs/entry/migrating-l ...

  10. MIDL相关

    根据MIDL的语义, 指针总被认为是指向单一元素而不是数组.因此以上方法中只有串中的第一个字符被封送.为此,MIDL引入了[string]特性来说明传递的是一个字符串 http://www.cnblo ...