Ionic 3: async pipe within ion-select returns null until select

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].

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

![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.


<div *ngIf="item.variantGroup.variants.length > 1" class="w-100">
 <p padding-left><b>{{ }}</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.price | enhancedCurrency | async ) + ')' }} 

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.