时间戳

首页 > 解决方案 > 在离子选择中使用 *ngFor 条件

angular - 在离子选择中使用 *ngFor 条件

问题描述

我是 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 进行调节，然后将“干净”的 json 传递给我的 html，但我不知道该怎么做，或者是否可以在我的 Html 文件上做. 任何帮助将不胜感激，在此先感谢。

标签： angularangular6ngforionic4angular-ng-if

解决方案

使用此管道

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

推荐阅读