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 ...
随机推荐
- java面试(6)
1 六大原则 详情参考:设计模式六大原则(转载). 2 UML类之间关系有几种?聚合和组合区别? 类之间可能存在以下几种关系:关联(association).依赖(dependency).聚合(A ...
- IDA Pro 权威指南学习笔记(五) - IDA 主要的数据显示窗口
在默认配置下,IDA(从 6.1 版开始)会在对新二进制文件的初始加载和分析阶段创建 7 个显示窗口 3 个立即可见的窗口分别为 IDA-View 窗口.函数窗口和消息输出窗口 可以通过 View - ...
- PHP字符串的处理(一)-字符串初识和比较
在PHP中,字符和字节一样,共有256种不同字符的可能性,PHP对Unicode没有本地支持,一个GB2312编码的汉字占2字节,一个UTF-8编码的汉字占3字节字符串看作字符集和时,并不是真正的数组 ...
- Python3之itertools模块
Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数. 1.Infinite Iterators Iterator Arguments Results Example cou ...
- 界面主窗体,子窗体的InitializeComponent(构造函数)、Load事件执行顺序
主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序1.执行主窗体定义事件 new函数时,同时执行主窗体构造函数,默认就一个InitializeComponent函 ...
- 如何使用Visual Studio2015进行C++项目创建
打开Visual Studio 2015,点击程序左上角的“文件”--“新建”--“项目”. 在弹出窗口选择模板“visual C++”,在新建项目栏里选择“win32控制台应用程序”,直接点击确定. ...
- 从javascript的循环问题来看待闭包本质
第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然又想起了这个问题,在这个春气盎然的周末,我就坐下来研究下并把结果和大家分享下: 先看代码:demo.html < ...
- webpack4+vue2+axios+vue-router的多页+单页混合应用框架
VUE2的单页应用框架有人分享了,多页应用框架也有人分享了,这里就分享一个单页和多页的混合应用框架吧,初现雏形,还有很多需要优化和改善的地方... 结尾有github地址. 项目结构 │ ├─buil ...
- bash shell笔记1 脚本基础知识
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://twentyfour.blog.51cto.com/945260/505644 * ...
- Nginx配置之基于域名的虚拟主机
1.配置好DNS解析 大家好,今天我给大家讲解下在Linux系统下DNS服务器的基本架设,正向解析,反向解析,负载均衡,还有从域以及一个服务器两个域或者多个域的情况. 实验环境介绍:1.RHEL5.1 ...