(十)、Angular4.0 数据绑定、管道

一、基本HTML属性绑定

• tableColspan的值会赋给colspan

Something

二、CSS类绑定

• [class]中的值someExpression会覆盖"aaa bbb"

something

• 如果isSpecial为true，则显示[class.special]中的special的值
  

something

• 控制多个class是否显示
  

三、样式绑定

• 如果isSpecial为true，则color为red
  

• font-style是要覆盖的样式 , 如果canSave为false，则使用normal
  

四、双向绑定 (每3秒会重置name为Tom)

app.component.ts

  name: string;constructor() {setInterval(() => {this.name = 'Tom';}, 3000);}

app.component.html

{{name}}

五、新建自定义管道

ng g pipe pipe/multiPle

六、定义自己的管道逻辑 multi-ple.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'multiPle'
})
export class MultiPlePipe implements PipeTransform {transform(value: any, args?: any): any {if (!args) {args = 1;}return value * args;}}

七、app.component.html中 使用管道

测试：{{size | multiPle:'2'}}

八、app.component.ts 中给size赋值

  size = 7;

九、启动项目，测试结果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！