Angular 自定义管道 pipes 的使用

Angular的管道是处理数据到显示的逻辑，我们获取的用户的roles是json的数组，并不能直接展示，所以需要写一个管道展示用户所有的角色。

创建src/app/helpers/pipes.ts写一个自定义管道arrayToString

  /**
   * 
   * @param value 传入值
   * @param defaultStr 默认显示
   * @param split 分割符
   * @param key object的key值
   */
  transform(value: Array<any>, defaultStr = '', split = ',', key?: string): string {
    if (value.length) {
      let strs;
      if (key) {
        strs = new Array();
        for (let v of value) {
          for (let k in v) {
            if (k == key) {
              strs.push(v[k]);
            }
          }
        }
      } else {
        strs = value;
      }
      return strs.join(split);
    } else {
      return defaultStr;
    }
  }

在src/app/app-routing.module.ts导入

import { ArrayToStringPipe } from './helpers/pipes';

并添加到declarations

  declarations: [
    ...
    ArrayToStringPipe,
    ...
  ]

在模板中使用src/app/views/user/list.component.html

{{m.roles | arrayToString:'普通用户':',':'name'}}

博客：《PHP 微服务练兵》系列教程

本作品采用《CC 协议》，转载必须注明作者和本文链接