angular 12 自定义管道通过获取数据抛出服务和 return 字符串而不是数字

Question

大家好我有这个问题

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

@Pipe({
  name: 'printingTypesPipe',
})
export class PrintingTypesPipePipe implements PipeTransform {
  public printingTypesData: PrintingTypesModel[] = [];
  name: any;
  constructor(private printingTypesService: PrintingTypesService) {}

  transform(value: string): any {
    this.printingTypesService.fetchPrintingTypes().subscribe((data) => {
      this.printingTypesData = data;
      const noon = this.printingTypesData.find((o: any) => {
        return Number(o.printing_type_id) === Number(value);
      });
      this.name = '';
      this.name = noon!.name_e;
    });
      return this.name;
  }
}

当我控制台日志 this.name 它给我字符串但是这个字符串没有出现在浏览器中！！

我试过了，但没有找到主要问题？非常感谢您的帮助:)

Answer 1

将您的转换函数更改为 return 像这样可观察

  transform(value: string): any {
    return this.printingTypesService.fetchPrintingTypes().pipe(map(data) => {
      this.printingTypesData = data;
      const noon = this.printingTypesData.find((o: any) => {
        return Number(o.printing_type_id) === Number(value);
      });          
      return noon!.name_e;
    });
  }

并在您的模板中在 printingTypesPipe pipe.for 示例后使用异步管道

{{ 'test' | printingTypesPipe | async }}

angular 12 自定义管道通过获取数据抛出服务和 return 字符串而不是数字

angular 12 custom pipe by fetch data throw service and return string instead of number

typescript

fetch-api

angular

angular12