DeathGhost

Angular 管道之异步数据读取转换

这篇文章发布于 2019年09月22日 01:00 星期日 阅读 193 次,评论 1 条

DeathGhost 编辑,归类于angular »

async 管道会订阅一个 Observable 或 Promise,并返回它发出的最近一个值。 当新值到来时,async 管道就会把该组件标记为需要进行变更检测。当组件被销毁时,async 管道就会自动取消订阅,以消除潜在的内存泄露问题。

每个应用开始的时候差不多都是一些简单任务:获取数据、转换它们,然后把它们显示给用户。

一旦取到数据,你就可以把它们原始值的 toString 结果直接推入视图中。 但这种做法很少能具备良好的用户体验。

例如,在项目应用中前端通过请求后端程序接口,往往会返回一些数字、字符或原始数据形式标识,常见的日期这类信息,通常会直接显示原始数据,用户可读性很差Sun Sep 22 2019 00:00:40 GMT 0800 (中国标准时间)等等诸如此类的数据信息,用户阅读起来比较困难,因此我们需要将其转换为2019-09-22这般方可。

这种情形下,在Angular中我们就需要使用管道对其转换,进而达到用户可读数据。更多管道信息,这里不多解释说明,下面看看关于Angular中异步数据信息管道的使用。

Angular 异步管道
Angular 异步管道 AsyncPipe

示例需求:通过请求获取本地城市JSON文件对城市编码创建管道

(前提场景:本地数据,数据库仅存储城市编码)

首先创建一个本地json文档,数据结构如下:

[
 {value: '001', label: '北京', isLeaf: true},
 {value: '002', label: '上海', isLeaf: true},
 {value: '003', label: '陕西省', children: [
  {value: '00301', label: '西安市', isLeaf: true},
  {value: '00302', label: '延安市', isLeaf: true},
 ]},
]
// isLeaf : 是否为子节点
// children : 含有子节点

我们将文档建立在项目静态文件资源目录中。然后在全局(具体根据数据而定)方法中创建一个Promise获取方法:

getCity() {
    const url = './assets/static_data/city.json';
    return new Promise((resolve, reject) => {
        if (localStorage.getItem('cityList')) {
        // 每登入系统则存储一次
        resolve(JSON.parse(localStorage.getItem('cityList')));
        return;
        }
        this.http.get(url).subscribe(
        data => {
            localStorage.setItem('cityList', JSON.stringify(data));
            resolve(data);
        }
        );
    });
}

定义好之后,其他页面需要我们可以随时调用。

下面就是城市json文件在本地,那么数据库不存在城市相关查询,仅保存了城市的value值(编码),如果我们在查询后获取后端返回的数据编码(如上述json文件中的“00301”),我们就需要通过管道将其转换为可读。

继上述,这时就需要创建一个管道 如: ng g p service/region --skipTests命令创建一个'region'(这里随便命名了下...)管道。

进入刚刚创建的region管道文件,引入我们获取城市的定义文件,例如:

import { Pipe, PipeTransform } from '@angular/core';
import { GlobalFunService } from '../service/global-fun.service';
...
  cityList: any;
  constructor(
    private globalFun: GlobalFunService,
  ) {}
  /** 处理方法 */
  returnIt(code, cityList) {
    for (const item of cityList) {
      if (item.value === code) {return item; }
      if (item.children) {
        const child = this.returnIt(code, item.children);
        if (child) {return child; }
      }
    }
  }
  async transform(value: any, ...args: any[]) {
    // 获取城市列表
    this.cityList = await this.globalFun.getCity();
    // 通过编码输入查找对应的城市名称将其返回
    return value ? this.returnIt(value, this.cityList)['label'] : '';
  }
...

这样,我们就创建了一个城市编码转换的管道。

组件中我们直接可以对其应用,如:查询返回数据信息中包含城市编码"00301",我们就可以:

{{item.cityCode | region | async}}

则可返回"00301"对应城市"西安市"(上述示例json)。

在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计1条)

  • lengband
    想问一下大神的网站是用什么博客框架写的,hexo还是WordPress?
⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

33

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕