Angular 在离子选择中使用带*NGF的条件

我刚接触Angular 6和Ionic 5，但目前正在学习。 我的select组件面临问题，我有以下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>

普雷米奥斯
{{article.Premio}}

我似乎找不到如何在select中显示Disponible=1的Premios。 我试过ngIf，但显然我不能同时使用它们。 我看到一些论坛说我应该在我的TS上做条件处理，然后将“干净的”json传递给我的html，但我不知道如何做，或者甚至不知道是否有可能在我的html文件上做。 任何帮助都将不胜感激，请提前感谢。

使用此管道

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>

普雷米奥斯
{{article.Premio}}

检查角度文档

使用此管道

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>

普雷米奥斯
{{article.Premio}}

---

检查angular docs

对于这一点，您可以始终使用ng容器，该容器不在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>

普雷米奥斯
{{article.Premio}}

对于这一点，您可以始终使用ng容器，该容器不在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>

普雷米奥斯
{{article.Premio}}

您是否要求选择选项

{article.Premio}}

在这里仅显示该文章的文章。Disponsible？是的，我想在下拉列表中显示JSONA中Disponsible=1的文章，您是否要求选择选项

{article.Premio}}

这里只显示那篇文章。Disponsible？是的，我想在下拉列表中显示json中Disponsible=1的文章。这种方法也很有效，比管道更简单，但两者都很有效。谢谢这也很有效，比管道更简单，但两者都很有效。谢谢