How to make a ngIf within an * ngFor Ionic 2

Navigation
0

Good afternoon, I'm learning Ionic 2, I have the following code: 

<ion-card *ngFor="let data of lista">
  <ion-card-content >
    <ion-card-title>
     {{ data.description }}

      </ion-card-title>
   <ion-grid >
   <ion-row>
    <ion-col col-6>Precio del Servicio:</ion-col> <ion-col col-6>${{ data.price }} </ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>Estatus del Pago:</ion-col> <ion-col col-6>{{ data.response }}</ion-col>
  </ion-row>
   <ion-row>
    <ion-col col-6>Fecha:</ion-col> <ion-col col-6>{{ data.created_at }}</ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>Trabajador:</ion-col> <ion-col col-6>{{ data.employee.name }} {{ data.employee.last_name }}</ion-col>
  </ion-row>
  <ion-row *ngIf="data.status == 'Pendiente'">
    <ion-col col-6><h3>Acerquese a cualquier punto de pago Efecty y realice su pago con el siguiente Pin:</h3></ion-col> <ion-col col-6><h3>{{ data.transaccion.data.ref_payco }}</h3></ion-col>
  </ion-row>
  <ion-row *ngIf="data.status == 'Pendiente'">
    <ion-col col-12><button ion-button clear large (click)="actualizar(data.ref_epayco)"><h3>Si ya Realizó su pago Haga Click aqui para Actualizar el Estatus del Pago</h3></button></ion-col> 
  </ion-row>
</ion-grid>
  </ion-card-content>
</ion-card>

When I run the application, I get the error: Can not read property 'data' of undefined. If I remove the ngIf it shows me the data without problems but I need to show a button in case the variable data.status == 'Pending'

I appreciate the help you can offer me

    
asked by Nessler Camargo 07.07.2017 в 21:07
source

1 answer

1

the problem that dates is null until the service returns the callback function, you must use the operator ? to solve your problem 

  <ion-row *ngIf="data?.status == 'Pendiente'">

Greetings

    
answered by 07.07.2017 / 21:13
source
Open a view in a new tab from the Controller in ASP MVC How to return a string with capital letters?