angular——数据操作及管道

<!-- 数据绑定 -->
<div [title]='title'>{{content}}
</div><!-- 解析绑定 html 标签 -->
content: string = '<h1>我是 html</h1>'
<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 world</div>
<div [ngStyle]="{'background': str}">hello world</div><!-- 引入图片直接 assets/... -->
<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)" />

双向数据绑定

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：是传入的格式化的值

例如：

<div>我的生日是{{birthday | date : "yyyy-MM-dd"}}</div>
date 是 name 的值
birthday 是 value
“yyyy-MM-dd” 是 args

修改管道的方法

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

使用管道

html 代码：
<p>自定义的管道 {{price | formatePipe: '￥'}}</p>
ts 代码：
price: number = 3.13456537;
界面显示：
自定义的管道￥3.13456537

angular——数据操作及管道相关推荐

（d2l-ai/d2l-zh）《动手学深度学习》pytorch 笔记（2）前言（介绍各种机器学习问题）以及数据操作预备知识Ⅰ
开源项目地址:d2l-ai/d2l-zh 教材官网:https://zh.d2l.ai/ 书介绍:https://zh-v2.d2l.ai/ 笔记基于2021年7月26日发布的版本,书及代码下载地址在 ...
Redis概述_使用命令对redis的数据进行增删改查_Jedis连接redis进行数据操作_redis进行数据缓存案例
学习目标 redis 概念下载安装命令操作 1. 数据结构持久化操作使用Java客户端操作redis Redis 前言(从百度上抄的, 看看了解一下, 懒得排版了) 1. 概念: redis是 ...
hive学习笔记-数据操作
hive数据操作 hive命令行操作 hive -d --define <key=value> 定义一个key-value可以在命令行中使用 hive -d database <da ...
Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
numpy和torch数据操作对比
对numpy和torch数据操作进行对比,避免遗忘. ndarray和tensor import torch import numpy as npnp_data = np.arange(6).resh ...
Redis数据库搭建主从同步（主从概念、主从配置、主从数据操作）
1. 主从概念⼀个master可以拥有多个slave,⼀个slave⼜可以拥有多个slave,如此下去,形成了强⼤的多级服务器集群架构 master用来写数据,slave用来读数据,经统计:网站的读 ...
命令行客户端MySQL基本命令的使用（登录、登出、数据库操作的SQL语句、表结构的SQL语句、表数据操作的SQL语句）
1. 登录和登出数据库登录数据库: 输入下面命令: mysql -uroot -p 说明: -u 后面是登录的用户名 [写成-u root也是可以的] -p 后面是登录密码, 如果不填写, 回车之 ...
MySQL基础篇：数据操作语言DML
1.概述数据操作语言(DML)用于插入.修改.删除.查询数据记录,包括以下SQL语句: INSERT:添加数据到数据库中 UPDATE:修改数据库中的数据 DELETE:删除数据库中的数据 2.插入 ...
逻辑模型三要素-数据操作
数据操作是指对数据库中各种对象的实例或取值所允许执行操作的集合,其中包括操作方法及有关规则,它是对数据库动态特性的描述.

angular——数据操作及管道

原生管道

自定义管道

angular——数据操作及管道相关推荐

最新文章

热门文章

angular——数据操作 及 管道

原生管道

自定义管道

angular——数据操作 及 管道相关推荐

最新文章

热门文章

angular——数据操作及管道

angular——数据操作及管道相关推荐