Angular 2 - 转换数据

在开发Angular应用时，需要对数据进行转换和处理，基于这点，Angular提供了丰富的API和工具。本文将介绍一些常用的数据转换技术和工具。

过滤器

过滤器是转换数据的最基本方式之一。在Angular中，我们可以使用内置的过滤器进行数据转换和过滤，例如：

1. currency

currency过滤器将数字转换为货币格式字符串，其语法为：

{{ 数字 | currency : 货币符号 : 显示位数 }} 

例如：

{{ 999 | currency : '￥' : 2 }} <!-- 输出: ￥999.00 --> 

2. date

date过滤器将日期转换为指定格式的字符串，其语法为：

{{ 日期 | date : 格式 }} 

例如：

{{ '2021-09-20T00:00:00Z' | date : 'yyyy-MM-dd' }} <!-- 输出: 2021-09-20 --> 

3. lowercase/uppercase

这两个过滤器分别将字符串转换为小写和大写格式，其语法为：

{{ 字符串 | lowercase }} 
{{ 字符串 | uppercase }} 

例如：

{{ 'Hello World!' | lowercase }} <!-- 输出: hello world! --> 
{{ 'Hello World!' | uppercase }} <!-- 输出: HELLO WORLD! --> 

管道

管道是一种更加通用和强大的数据转换工具。在Angular中，我们可以编写自定义管道来进行数据转换。编写管道非常简单，只需要实现一个PipeTransform接口即可。例如：

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

@Pipe({ 
    name: 'reverse' 
}) 
export class ReversePipe implements PipeTransform { 
    transform(value: string): any { 
        return value.split('').reverse().join(''); 
    } 
} 

这个管道可以将字符串反转输出。在模板中使用它的语法为：

{{ 字符串 | reverse }} 

异步管道

在处理一些复杂的数据转换时，可能需要异步获取远程数据。在这种情况下，我们可以使用异步管道。异步管道类似于普通管道，但它支持异步操作。例如：

import { Pipe, PipeTransform } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 

@Pipe({ 
    name: 'fetch', 
    pure: false 
}) 
export class FetchPipe implements PipeTransform { 
    constructor(private _http: HttpClient) {} 

    transform(url: string): Observable<any> { 
        return this._http.get(url); 
    } 
} 

这个异步管道可以使用HttpClient获取指定URL的数据。在模板中使用它的语法为：

<div *ngFor="item of ('https://api.com/items' | fetch) | async"> 
    {{ item }} 
</div> 

表单验证器

表单验证器是Angular中非常重要的一部分。使用表单验证器，我们可以对表单中的数据进行验证和转换。验证器类似于管道，但它们通常会返回一个错误对象。下面是一个简单的自定义验证器的例子：

import { AbstractControl, ValidatorFn } from '@angular/forms'; 

export function forbiddenNameValidator(nameRegex: RegExp): ValidatorFn { 
    return (control: AbstractControl): { [key: string]: any } | null => { 
        const forbidden = nameRegex.test(control.value); 
        return forbidden ? { 'forbiddenName': { value: control.value } } : null; 
    }; 
} 

这个验证器可以对输入框的值进行正则表达式匹配，并在匹配失败时返回一个错误对象。使用它的方法为：

name: ['', [forbiddenNameValidator(/admin/)]]

总结

Angular提供了丰富的API和工具来处理和转换数据。了解和掌握这些技术和工具，对于Angular应用的开发是非常有帮助的。本文介绍了一些常用的数据转换技术和工具，包括过滤器、管道、异步管道和表单验证器。希望对大家有所帮助。

参考链接

• Angular 过滤器
• Angular 管道
• Angular 表单验证器