angular——数据操作 及 管道


<div [title]='title'>
  {{content}}
div>



content: string = '<h1>我是 htmlh1>'
<div [innerHtml]='content'>div>



<div *ngFor="let item of arr">
  {{item}}
div>

<div *ngFor="let item of objArr">
  {{item.name}}--{{item.age}}
div>



<div *ngFor="let item of arr;let key=index">
  {{key}}--{{item}}
div>



<img src="assets/imgs/3.jpg" *ngIf="flag" alt="">
<img src="assets/imgs/5.jpg" *ngIf="!flag" alt="">

<span [ngSwitch]="order">
  <p *ngSwitchCase="1">我好p>
  <p *ngSwitchCase="2">你好p>
  <p *ngSwitchDefault>大家好p>
span>



<div *ngFor="let item of arr;let key=index">
  <span *ngIf="key===1" class="red">{{item}}span>
  <span *ngIf="key!==1">{{item}}span>
div>

<div *ngFor="let item of arr;let key=index">
  <span [ngClass]="{'red': key===2}">{{item}}span>
div>



<div [ngClass]="{'red': flag}">hello worlddiv>
<div [ngStyle]="{'background': str}">hello worlddiv>



<img src="assets/imgs/3.jpg" alt="">
<img [src]="url" alt="">



<div>
  {{time | date:'yyyy-mm-dd hh:mm:ss'}}
div>



<button (click)="run()">执行button>

<button (click)="change('改变后')">{{title}}button>
title: string = '改变前'
change(str: string):void {
  this.title = str
}

<input type='text' (input)="input($event)" />

angular——数据操作 及 管道_第1张图片
双向数据绑定

  • app.modules.ts 中引入数据双向绑定模块
  // 数据双向绑定模块
  import { FormsModule } from '@angular/forms'

  imports: [ // 配置当前模块依赖的其他模块
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  • 使用数据双向绑定
<input type="text" [(ngModel)]="keywords">
{{keywords}}

// ts 中设置默认值
keywords: string = '这是默认值'

原生管道

名称 描述
json 将输入数据对象经过 JSON.stringify() 方法转换后输出对象的字符串 {{jsonObject | json}}
uppercase 大写转换
lowercase 小写转换
currency 格式化数字为货币格式 {{b | currency:'USD':true:'4.2-2'}} ,这里的′USD′是美元 UnitedStatesdollar 的缩写,当为 false 时不显示符,当为 true 时,则显示 $ 符。后面的规定小数位数的参数和 number 的一样
number 用来将数字处理为我们需要的小数格式 {{pi | number:'{最少整数位数}.{最少小数位数}-{最多小数位数}'}}
date 日期格式化 {{time | date:'yyyy-mm-dd hh:mm:ss'}}
limitTo 限制数组长度或字符串长度 {{childrenArray | limitTo : 2}}

filter

childrenArray:object[] = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
]
func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //匹配属性值中含有 a 的
{{ childrenArray | filter : 4 }} //匹配属性值中含有 4 的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配 name 属性中含有 i 的
{{childrenArray | filter : func }} //参数是函数,指定返回 age>4 的

orderBy: 过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则

  • 参数可以是一个字符串,表示以该属性名称进行排序
  • 可以是 一个函数,定义排序属性
  • 还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较)
{{ arr | orderBy : 'age' }} //按 age 属性值进行排序,若是 -age,则倒序
{{ arr | orderBy : orderFunc }} //按照函数的返回值进行排序
{{ arr | orderBy : ['age','name'] }} //如果 age 相同,按照 name 进行排序

自定义管道

准备工作

新建一个 名字叫做 formatePipe 的管道
使用命令行工具:ng g pipe pipe/formatePipe
注意
管道的声明是需要加入到 app.moduel.ts 的 元数据中 declarations FormatePipePipe 类

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formatePipe'
})
export class FormatePipePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}

源码解释:

@Pipe({
name: ‘formatePipe’
})
@Pipe语法糖是告诉 angular 当前的类是一个 管道
name 的值是:我们使用管道的时候的模版表达式的标识符。这个名字是可以任意定义的。

transform(value: any, args?: any): any {
    return null;
}

transform 方法
value: 是传入的值
args: 是传入的格式化的值

例如:

我的生日是{{birthday | date : "yyyy-MM-dd"}}

date 是 name 的值
birthday 是 value
“yyyy-MM-dd” 是 args

修改管道的方法

transform(value: String, args: String): any {
  if( !args ){
      return value;
  }
  
  return  args +""+ value;
}

使用管道

html 代码:

自定义的管道 {{price | formatePipe: '¥'}}


ts 代码:
price: number = 3.13456537;
界面显示:
自定义的管道 ¥3.13456537

你可能感兴趣的