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 ...
随机推荐
- 1024 Palindromic Number
题意: 给出一个数N(N<=10^10),最多可操作K次(K<=100),每次操作为这个数和其反转之后的数相加,若得到的结果为回文数,则输出:若在K次迭代后仍然不是回文数,在输出第K次操作 ...
- java面试(6)
1 六大原则 详情参考:设计模式六大原则(转载). 2 UML类之间关系有几种?聚合和组合区别? 类之间可能存在以下几种关系:关联(association).依赖(dependency).聚合(A ...
- JavaScript笔记——基础知识(二)
Function类型 函数function不需要返回类型(不是没有返回值),参数也不需要指定类型,更为特殊的是函数竟然是个类,可以通过new出来 var box= new Function('num1 ...
- 使用airodump-ng扫描网络
执行命令 root@sch01ar:~# airodump-ng wlan0mon 参数介绍: BSSID:表示无线AP的Mac地址 PWR:网卡报告的信号水平 Beacons:无线AP发出的通告编号 ...
- C# web程序,winform程序,控制台程序配置log4net,使用log4net
第一添加log4net.config,这里配置包括信息提示写入,错误信息写入,控制台消息展示 <?xml version="1.0" encoding="utf-8 ...
- .Net Core 迁移之坑二 《ToString("F") 输出与windows不一致问题》
大家都知道 ToString("F") 是干什么的 这里我还是介绍一下 格式字符串采用以下形式:Axx,其中 A 为格式说明符,指定格式化类型,xx 为精度说明符,控制格式化输出的 ...
- oracle语言基础
一.语言分类 1.DML(Data Manipulation Language,数据操作语言):用于对数据的操作. DML包括:(1)SELECT:查询数据 select * from temp; ...
- ThinkPHP5如何引用新建的配置文件?
1.在Application文件夹下建立extra 文件夹,并把新建的配置文件(例如字典配置文件dictConfig.php等)放入此文件夹: 2.在代码中使用 Config::get("d ...
- jdk环境变量一键设置 管理員运行
退出360等杀毒软件 本机win10 其他环境自测.参考了网上代码修改. @echo off rem dss color 02 mode con cols=70 lines=30 title JDK ...
- 学习神器!本机安装虚拟机,并安装Linux系统,并部署整套web系统手册(包含自动部署应用脚本,JDK,tomcat,TortoiseSVN,Mysql,maven等软件)
1. 引言 编写目的 本文档的编写目的主要是在Linux系统上部署mis_v3员工管理系统,方便测试,并为以后开发人员进行项目部署提供参考 准备工作 软件部分 软件项 版本 备注 Mysql 5. ...