Angular12自定义管道调用服务拉取数据返回字符串浏览器不展示问题

问题根因 #

1. 异步执行顺序错位：fetchPrintingTypes 是异步请求，subscribe 回调会在请求响应后才执行，而 transform 方法会直接同步返回初始状态的 this.name，此时异步请求还未返回，this.name 为初始的 undefined。
2. 纯管道的更新机制限制：Angular 默认自定义管道为纯管道，仅当输入参数的引用发生变化时才会重新执行 transform 方法。异步请求返回后修改了 this.name，但输入参数 value 没有变化，Angular 不会重新触发 transform 执行，页面自然无法拿到更新后的值。
3. 隐含性能问题：当前逻辑下每次管道被调用都会发起一次新的HTTP请求，如果管道在列表等场景被多次调用，会产生大量重复无效请求。

推荐解决方案 #

方案一：预缓存数据+同步管道（性能最优，优先推荐） #

先在服务层对打印类型数据做缓存，管道直接读取缓存做同步匹配，避免异步逻辑。

1. 改造 PrintingTypesService 增加缓存逻辑：

@Injectable({ providedIn: 'root' })
export class PrintingTypesService {
  private printingTypesCache?: PrintingTypesModel[];

  fetchPrintingTypes(): Observable<PrintingTypesModel[]> {
    // 有缓存直接返回缓存数据
    if (this.printingTypesCache) {
      return of(this.printingTypesCache);
    }
    return this.http.get<PrintingTypesModel[]>('你的接口地址').pipe(
      tap(data => this.printingTypesCache = data)
    );
  }

  // 新增同步获取打印类型名称的方法
  getPrintingTypeName(typeId: string): string {
    return this.printingTypesCache?.find(item => 
      Number(item.printing_type_id) === Number(typeId)
    )?.name_e ?? '-';
  }
}

2. 改造自定义管道为纯同步管道：

import { Pipe, PipeTransform } from '@angular/core';
import { PrintingTypesService } from 'src/app/settings/services/printing-types/printing-types.service';

@Pipe({
  name: 'printingTypesPipe'
})
export class PrintingTypesPipe implements PipeTransform {
  constructor(private printingTypesService: PrintingTypesService) {}

  transform(value: string): string {
    return this.printingTypesService.getPrintingTypeName(value);
  }
}

3. 在用到该管道的组件 ngOnInit 生命周期中提前调用一次 fetchPrintingTypes 触发数据缓存即可。

方案二：管道返回Observable配合async管道使用 #

如果不想预加载数据，可以直接让管道返回 Observable，结合 Angular 内置的 async 管道自动处理订阅和视图更新：

import { Pipe, PipeTransform } from '@angular/core';
import { map, shareReplay } from 'rxjs/operators';
import { PrintingTypesService } from 'src/app/settings/services/printing-types/printing-types.service';

@Pipe({
  name: 'printingTypesPipe'
})
export class PrintingTypesPipe implements PipeTransform {
  constructor(private printingTypesService: PrintingTypesService) {}

  transform(value: string): Observable<string> {
    return this.printingTypesService.fetchPrintingTypes().pipe(
      map(data => data.find(item => 
        Number(item.printing_type_id) === Number(value)
      )?.name_e ?? '-'),
      shareReplay(1) // 避免重复发起请求
    );
  }
}

页面使用时追加 async 管道即可：

{{ 打印类型ID | printingTypesPipe | async }}

不推荐方案：设置管道为非纯 #

可以通过将管道的 pure 属性设为 false 让Angular每次变更检测都重新执行 transform 方法，虽然能解决显示问题，但会带来极大的性能损耗，仅适合管道调用次数极少的场景：

@Pipe({
  name: 'printingTypesPipe',
  pure: false
})

使用该方案仍需补充请求缓存逻辑，避免重复发起HTTP请求。

内容的提问来源于stack exchange，提问作者Asim Al-Bakali