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

Question

Hi Every Mind I have this problem

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;
  }
}

When I console log this.name it give me string but this string did not appear in browser!!

I Tried but I did not find the main problem? Thanks A lot for your Help :)

this is simple because fetchPrintingTypes return an observable(async means here) .when the transform function of the pipe call , at this time name variable has no value and it is undefined and it will return undefined and after some period of time fetchPrintingTypes return the value.I refer you to visit this link for more information. stackoverflow.com/questions/54134175/… — Mohammadreza Mohammadi
– Mohammadreza Mohammadi, Commented Dec 1, 2021 at 16:11

Mohammadreza Mohammadi · Accepted Answer · 2021-12-01 16:15:57Z

2

change your transform function to return observable like this

  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;
    });
  }

and in your template use async pipe after printingTypesPipe pipe.for example

{{ 'test' | printingTypesPipe | async }}

answered Dec 1, 2021 at 16:15

Mohammadreza Mohammadi

1375 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asim Al-Bakali Over a year ago

I have Another Question its near this above How Can I take number array and return it works like this {{3,2,5,6,null,null},{7,8,5,9,3,2}} and return {{flex,reload,tre,bannar},{taken,board,t,e,w,s}}

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related