Use conditions with *ngFor in ion-select

Question

i'm new to Angular 6 and Ionic 5 but currently learning. Im facing a issue with my select component, i have this json:

 {
   "Error":200,
   "Cliente":1,
   "Nombre":"Antonio Galdamez Castillo",
   "SaldoPuntos":"156.000000",
   "Premios":[
      {
         "IdPremio":"1",
         "Premio":" $1 (UN Dolar) Mecaderia",
         "Puntos":"10",
         "TipoPremio":"Premio Propio",
         "Disponible":"1",
         "Empresa":"FABIOS BOUTIQUE"
      },
      {
         "IdPremio":"2",
         "Premio":" $5 (Cinco US Dolares) Mercaderia",
         "Puntos":"50",
         "TipoPremio":"Premio Propio",
         "Disponible":"1",
         "Empresa":"FABIOS BOUTIQUE"
      },
      {
         "IdPremio":"3",
         "Premio":" $10 (Diez US Dolares) Mercaderia",
         "Puntos":"100",
         "TipoPremio":"Premio Propio",
         "Disponible":"1",
         "Empresa":"FABIOS BOUTIQUE"
      },
      {
         "IdPremio":"4",
         "Premio":"$20 (Veinte US Dolares) Mecaderia",
         "Puntos":"200",
         "TipoPremio":"Premio Propio",
         "Disponible":"0",
         "Empresa":"FABIOS BOUTIQUE"
      },
      {
         "IdPremio":"7",
         "Premio":"$50 (Cincuenta US Dolares) Mercaderia",
         "Puntos":"500",
         "TipoPremio":"Premio Propio",
         "Disponible":"0",
         "Empresa":"FABIOS BOUTIQUE"
      },
      {
         "IdPremio":"8",
         "Premio":"$100 (Cien US Dolares) Mercaderia",
         "Puntos":"1000",
         "TipoPremio":"Premio Propio",
         "Disponible":"0",
         "Empresa":"FABIOS BOUTIQUE"
      },
      {
         "IdPremio":"9",
         "Premio":"$200 (Doscientos US Dolares) Mercaderia",
         "Puntos":"2000",
         "TipoPremio":"Premio Propio",
         "Disponible":"0",
         "Empresa":"FABIOS BOUTIQUE"
      }
   ]
}

And i have this on my Html file:

<ion-item>
    <ion-label>Premios</ion-label>
    <ion-select [(ngModel)]="premio" ok-text="Seleccionar" cancel-text="Cancelar" >
      <ion-select-option *ngFor="let article of data?.Premios" value="{{article.IdPremio}}">{{article.Premio}}</ion-select-option>
    </ion-select>
  </ion-item>

I cant seem to find how to display in select the Premios that has Disponible = 1. I've tried the *ngIf but apparently i cant use them together. I've seen some forums that says i should do the conditioning on my TS and then pass the "clean" json to my html but i'm not sure how to do it or if is it even possible to do it on my Html file. Any help would be much appreciated, thanks in advance.

Answer 1

Use this pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'disponiblePipe',
})
export class DisponiblePipe implements PipeTransform {

    transform(data: any[]) {
        return data.filter(article => article.Disponible == "1");
    }

}

Like this

<ion-item>
    <ion-label>Premios</ion-label>
    <ion-select [(ngModel)]="premio" ok-text="Seleccionar" cancel-text="Cancelar" >
        <ion-select-option *ngFor="let article of data?.Premios | disponiblePipe" value="{{article.IdPremio}}">{{article.Premio}}</ion-select-option>
    </ion-select>
</ion-item>

check angular docs https://angular.io/guide/pipes