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

使用此管道

Pivot.IsHeaderItemsCarouselEnabled = "False"

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

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

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

}

检查角度文档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>

离子选择中带* ngFor的条件

2 个答案: