离子选择中带* ngFor的条件

Question

我是Angular 6和Ionic 5的新手，但目前正在学习。 我面临我的选择组件的问题，我有这个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"
      }
   ]
}

我的HTML文件中有这个：

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

我似乎无法找到如何在具有Disponible = 1的Premios中显示。我尝试了* ngIf，但显然我不能一起使用它们。 我看过一些论坛，说我应该对我的TS进行调节，然后将“ clean” json传递给我的html，但是我不确定该怎么做，或者是否有可能在我的Html文件中做到这一点。 任何帮助将不胜感激，在此先感谢。

Answer 1

使用这个管道

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

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

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

}

像这样

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

检查角度文档https://angular.io/guide/pipes

Answer 2

为此，您可以始终使用ng-container，该容器不是在DOM中呈现的，但是可以帮助您一起进行某种类型的ngfor和ngif。 未经测试，但这应该为您工作。

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