async function from pipe service angular

Question

I need to find province name from angular so I write a pipe service for find name with code this is my code pipe

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

here I called CallDataService, from CallDataService I have a function Which is called getAllProvinces, I take all Provinces from API now I set for because I need to find Province name and return name from HTML this my HTML code

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

but I can`t retunr variable nameProvince because this undefined and i think because this.callData.getAllProvinces() not async, are you have any idea ?

Please read the canonical https://stackoverflow.com/q/14220321/3001761 - in this case, you could return an *observable* of the value and use `| async` to resolve it. — jonrsharpe, Jul 01 '20 at 16:21

LogicBlower · Answer 1 · 2020-07-02T07:37:32.637

return a observable from your pipe
use async pipe with you pipe that will resolve the subscription for you

-- Try update it like below:

   {{userData.state | async | convertState }}

// in your pipe

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

do not subscribe in the pipe transform , just use rxjs pipe and map operator to do filtering and it will return a observable rest async pipe will take care to resolve it.

@nima amr : is the above logic , didn't worked for you ? what error you are getting ? — LogicBlower, Jul 02 '20 at 07:34

async function from pipe service angular

1 Answers1