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

从管道中返回可观察对象
将异步管道与您的管道一起使用，它将为您解决订阅问题

- 尝试如下更新：

   {{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管道和地图运算符进行过滤，它将返回一个可观察到的剩余异步管道，请谨慎解决。

管道服务角度的异步功能

1 个答案: