Angular | 已知字典表value值，反顯對應label

應用場景
在一些業務場景中，尤其是表單展示數據時，會包含一些存爲字典表的數據，比如地址信息等，後端接口如果只返回了key值，則需要前端通過調用字典表接口去查詢value值來反顯到表單上。

業務html: dictSrv.province$是字段對應的字典表接口，返回值爲Observable；dictTrans是字典轉換管道(Pipe)；province是後端傳回的key取值；value和label的傳值具體根據字典表返回的key和value對應的字段

<div>省份: {{ dictSrv.province$ | async | dictTrans: province	: 'value' : 'label' }}</div>

字典轉換Pipe

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

@Pipe({
  name: 'dictTrans',
})
export class DictTransPipe implements PipeTransform {
  // arr是取到的字典list
  transform(arr: any[], value, findKey, showKey?, equal: boolean = true): any {
    if (Array.isArray(arr) && value) {
      const data = arr.find(item => {
        if (equal) {
          return item[findKey] === value;
        } else {
          return value.includes(item[findKey]);
        }
      });
      return showKey ? (data ? data[showKey] : data) : data;
    }
    return value;
  }
}