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 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!