Используйте условия с * ngFor в ion-select - PullRequest
Новая
       40

Используйте условия с * ngFor в ion-select

0 голосов
/ 23 января 2019

Я новичок в 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>

Я не могу найти, как отобразить ввыберите Premios с Disponible = 1. Я попробовал * ngIf, но, видимо, я не могу использовать их вместе.Я видел некоторые форумы, на которых написано, что я должен выполнить подготовку моего TS, а затем передать «чистый» json в мой html, но я не уверен, как это сделать или возможно ли это сделать в моем html-файле.,Любая помощь будет высоко ценится, спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Для этой цели вы всегда можете использовать 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>
0 голосов
/ 23 января 2019

Используйте эту трубу 

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

...