2

I have a custom pipe component which needs the async pipe along with it to return the output. It works across the app with no problems.

However, when using the custom component along with async pipe within an ion-select, on initial load it shows null [1] on the selected option, until you open the ion-select and then it populates all the correct outputs [2].

null data ![when opening the modal the data shows as null][1]

correct data ![clicking ion-select open converts data appropriately][2]

I have taken off the pipes to see if the initial information is loading within the ion-select to begin with, and yes, the data is there. This only returns null when the pipes are implemented as well.

I am passing the 'item' object through navParams to this modal.

I have to use the async pipe along with this modal as the custom pipe waits to get data returned as a promise first, before it can transform it.

item-detail.html

<div *ngIf="item.variantGroup.variants.length > 1" class="w-100">
 <p padding-left><b>{{ item.variantGroup.name }}</b></p>
 <ion-select [(ngModel)]="item.selected.variant" [selectOptions]="{title: 'Choose an option'}" required class="w-100">
  <ion-option *ngFor="let v of item.variantGroup.variants" [value]="v">{{ v.name + ' (' + ( v.price | enhancedCurrency | async ) + ')' }} 
  </ion-option>
 </ion-select>
</div>

enhanced-currency.ts (pipe)

transform(value: any, symbol: string) {
 let countryCurrency: string;

 return this.userProvider.getCountry().then((data: string) => {
   !symbol ? countryCurrency = UtilitiesProvider.getMetadataOfCountry(data).currency : countryCurrency = symbol;

  return this.cp.transform(_.round(value / 100, 2), countryCurrency, 'symbol-narrow'); 
});

The expected output should show the price transformed straight away on modal open.

So in the above example of the pictures it would be showing $3.50 and not null.

Manish Balodia
  • 1,863
  • 2
  • 23
  • 37
Kirsten
  • 171
  • 1
  • 3
  • 13
  • when are you calling transform method? – AbdulAzeem Jun 04 '19 at 04:37
  • @AbdulAzeem transform method is called within the pipe .ts file. so it is referenced in the .html file as the | enhancedCurrency pipe – Kirsten Jun 04 '19 at 05:48
  • 2
    make an object of your pipe in page and tranform the data and use it without | enhancedCurrency just v.price check this link https://stackoverflow.com/a/39654029/10127727 – AbdulAzeem Jun 04 '19 at 06:04
  • @AbdulAzeem thank you for that suggestion. have done what you suggested and taken the data to be transformed and applied the pipe to it within the .ts file and displaying that in the html instead. – Kirsten Jun 04 '19 at 23:27

0 Answers0