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 協議》，轉載必須註明作者和本文連結