管道服务角度的异步功能

Question

我需要从角度查找省份名称，所以我编写了一个管道服务来查找名称，代码这是我的代码管道

export class ConvertStatePipe implements PipeTransform {
  constructor(private callData: CallDataService) {}

  transform(value: string): any {
    let nameProvince = '';
    this.callData.getAllProvinces().subscribe( (res) => {
      for (const item of res.provinces) {
        if (item.provinceCode === value) {
          nameProvince = item.name;
        }
      }
    });
    return nameProvince;
  }

这里我调用了 CallDataService，从 CallDataService 我有一个函数，叫做 getAllProvinces，我现在从我设置的 API 中获取所有省份，因为我需要找到省份名称并从 HTML 返回名称 这是我的 HTML 代码

<div class="mb-24 terminal-item" fxFlex="33.33333%">
   <strong>Province</strong>
   {{userData.state | convertState }}
</div>

但我无法返回变量 nameProvince，因为这个未定义，我认为因为 this.callData.getAllProvinces() 不是异步的，你知道吗？

Answer 1

1. 从你的管道中返回一个 observable
2. 使用 异步管道 为您解决订阅问题

-- 尝试如下更新：

   {{userData.state | async | convertState }}

// 在你的管道中

        export class ConvertStatePipe implements PipeTransform {
          constructor(private callData: CallDataService) {}
        
          transform(value: string): any {
            let nameProvince = '';
    // update below to return observable
    
          nameProvince =  this.callData.getAllProvinces().pipe( map((res) => {
              let value = '';
for (const item of res.provinces) {
                if (item.provinceCode === value) {
                  value  =  item.name;
                }
              }
return value;
            }));
            return nameProvince;
          }

• 不要订阅管道转换，只需使用 rxjs 管道和映射操作符 进行过滤，它会返回一个可观察的 rest 异步管道会小心解决它。