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

以你之姓@ 2022-05-28 04:35 149阅读 0赞

**一、基本HTML属性绑定**

*  tableColspan的值会赋给colspan

<td [attr.colspan]="tableColspan">Something</td>

**二、CSS类绑定**

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

<div class="aaa bbb" [class]="someExpression">something</div>

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

<div [class.special]="isSpecial">something</div>

*  控制多个class是否显示

<div [ngClass]="{aaa:isA, bbb:isB}"></div>

**三、样式绑定**

*  如果isSpecial为true，则color为red

<button [style.color]="isSpecial ? 'red':'green'"></button>

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

<button [ngStyle]="{'font-style':this.canSave ? 'itailc':'normal'}"></button>

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

app.component.ts

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

app.component.html

<input [(ngModel)]="name">
    {
       {name}}

**五、新建自定义管道**

ng g pipe pipe/multiPle

注意查看@NgModule中的declarations属性有没有MultiPlePipe

**六、定义自己的管道逻辑 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中 使用管道**

<p>测试：{
       {size | multiPle:'2'}}</p>

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

size = 7;

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

![20180329170411692][]

[20180329170411692]: /images/20220528/ebc70df911664f68afc72173cbd9f204.png

发表评论取消回复

表情：

评论列表（有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular2中的数据绑定

实现数据绑定首先要在input的上面添加name属性，否则是绑定不上的。添加完成name属性后再在input上面添加ng-model=”绑定的变量” <inpu

墨蓝/ 2022年07月15日 11:39/ 0 赞/ 149 阅读

相关 Angular4的双向数据绑定

最近在学angular4，因为angularjs中默认是双向数据绑定，但是如果在比较复杂的页面使用的话会引起性能问题，那是因为angularjs会在页面保存一个所有数据绑定的列

深碍√TFBOYSˉ_/ 2022年06月05日 06:54/ 0 赞/ 204 阅读

相关 Angular 绑定语法简介

一、绑定类型数据绑定是一种机制，用来协调用户所见和应用数据。虽然我们能往HTML推送值或者从HTML拉去值，但如果把这些琐事交给数据绑定框架处理，应用汇更容易编写、阅读和维

傷城~/ 2022年06月03日 05:55/ 0 赞/ 184 阅读

相关 angular 绑定enter键

<div class="jumppage" > <input type="text" placeholder="跳转" οnfοcus="this.placeholder=

忘是亡心i/ 2022年06月02日 08:51/ 0 赞/ 145 阅读

相关【Angular4】基础（三）：数据绑定

数据绑定总体而言有三种类型： \{ \{…\}\} 插值表达式绑定属性绑定事件绑定插值表达式绑定插值表达式绑定比较常见 // ap

ゞ浴缸里的玫瑰/ 2022年05月30日 05:07/ 0 赞/ 234 阅读

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

一、基本HTML属性绑定 tableColspan的值会赋给colspan <td [attr.colspan]="tableColspan">Somethi

以你之姓@/ 2022年05月28日 04:35/ 0 赞/ 150 阅读

相关 angular 双向绑定

Can't bind to 'ngModel' since it isn't a known property of 'input'. 原因:库未引用完整解决:

古城微笑少年丶/ 2022年05月20日 06:45/ 0 赞/ 232 阅读

相关 Angular 单向数据绑定{{}}与[]

单向数据绑定首先认识一下数据绑定: Angular中的数据绑定指的是同一组件中的控制器文件(.ts)与模板文件(.html)之间的数据传递。再认识一下单向数据绑定:

r囧r小猫/ 2022年05月15日 00:59/ 0 赞/ 289 阅读

相关 angular6学习(八)：数据绑定

数据绑定： ![70][] 一、插值表达式绑定：\{ \{data\}\} ts文件中： ![70 1][] html文件中 ![70 2][] 显示

野性酷女/ 2022年05月09日 03:40/ 0 赞/ 154 阅读

相关 Angular--数据绑定

前言 Angular学习的时候，在数据与数据之间的处理联系是非常重要的，而且处理数据之间的逻辑不是很清楚明白的话，很容易弄混，所以这篇博客总结一下数据与数据之间的关系，简

淩亂°似流年/ 2021年09月27日 08:24/ 0 赞/ 370 阅读