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 ...
随机推荐
- windows-x64下安装python3.6
1.下载python3安装包,注意要安装windowsx64的exe安装包.python-3.6.2-amd64.exe 2.设置window的环境变量:C:\Users\您设置的windows用户名 ...
- linux 下 进程和线程的区别
1.进程与线程 进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程是进程的一个执行流,是C ...
- python's ninteenth day for me 类的组合,继承。
组合: 表示一个类的对象作为另一个类对象的属性. 实例化的过程: 1,创建一个对象. 2,__init__ 给对象添加一些属性,对象默认的名字为self. 3,将self所指向的内存空间返回给实例化他 ...
- redis基本操作和在springboot中的使用
本文介绍redis的使用 redis启动步骤 说明 redis自增自减相关操作 redis string set操作 get操作 其他操作 redis hash set操作 get操作 其他操作 re ...
- 第二章 Java内存区域与内存溢出异常(待续)
·········
- javascript中的类方法、构造方法、原型方法的对比
如果你已经接触js很久了,那么应该可以看看我总结的是否正确,如果你刚开始学习,那么通过我的总结,你可以更快的区别他们,记得我刚接触js时,这一块反正是模糊了很久! 1,长相的区别: function ...
- BurpSuite系列(十一)----Project options模块(项目选择)
一.简介 Project options主要用来对Project的一些设置. 二.模块说明 Project options主要由五个模块组成: 1.Connections 连接2.HTTP3.SSL4 ...
- Hadoop Serialization -- hadoop序列化详解 (2)
回顾: 回顾序列化,其实原书的结构很清晰,我截图给出书中的章节结构: 序列化最主要的,最底层的是实现writable接口,wiritable规定读和写的游戏规则 (void write(DataOut ...
- 单元测试简介和Junit的使用介绍
单元测试简介和Junit的使用介绍 Junit是Java开发中用来支持单元测试的一个软件,这里对它的基本情况.使用方法等做简单的介绍. 提纲 1.软件测试 2.单元测试概述 3.单元测试的具体做法 4 ...
- 201671010140. 2016-2017-2 《Java程序设计》java学习第八周
第八周Java学习 本周,老师带领我们完善了一下继承,借口,拷贝,lambda表达式,内部类方面欠缺,不完善的地方,帮助我们查漏补缺. 以拷贝的学习为例,我本来对拷贝的理解非常浅 ...