wie Details angezeigt werden mit ng für in ionic 2

Question

Ich danke Seite in meinem Projekt. in Erfolg nennt es ORDER DETAILS und Anlieferungs-Details & Failure Anrufanzeige wird es nur ORDER DETAILS ..

Erfolg Aufruf funktioniert gut, aber Ausfall Anruf nicht angezeigt, um Details anzuzeigen ...

unten ist mein HTML-Code ..

<!-- 
    Generated template for the ThankYouPage page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
--> 
<ion-header> 
    <ion-navbar> 
    <ion-title>Order Summary</ion-title> 
    <ion-buttons end> 
     <button ion-button icon-only> 
      <ion-icon name="share"></ion-icon> 
     </button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <div *ngIf="orderSuccess"> 
    <ion-item no-lines> 
     <ion-row> 
     <ion-icon ios="ios-checkmark-circle" md="md-checkmark-circle" class="success"></ion-icon> 
     </ion-row> 
     <ion-row class="text-center"> 
     <p>Thank you. Your order has been</p> 
     </ion-row> 
     <ion-row class="text-center"><p>Successfully Placed.</p></ion-row>  
    </ion-item> 
    <hr> 
    </div> 
    <div *ngIf="orderFailure"> 
     <ion-item> 
     <ion-row> 
      <ion-icon ios="ios-close-circle" md="md-close-circle" class="failure"></ion-icon> 
     </ion-row> 
      <ion-row class="text-center"> 
       <p>Sorry! Failed to place your order.</p> 
      </ion-row> 
      <ion-card> 
      <ion-card-content> 
       Your Order could not be completed because of the-"System Generated Issue" 
      </ion-card-content> 
      </ion-card>  
     </ion-item> 
    </div> 
     <ion-item *ngFor=" let item of orderDetailsArray"> 
     <div class="div"> Order Details </div> 
     <ion-row *ngIf="orderSuccess"> 
      <ion-col class="down">Order Date</ion-col><br> 
      <ion-col class="down">{{item.date_added | date:'MMM-dd-yyyy'}}</ion-col> 
     </ion-row> 
      <ion-row *ngIf="orderSuccess"> 
      <ion-col>Order number</ion-col><br> 
      <ion-col>{{item.order_id}}</ion-col> 
      </ion-row> 
      <hr> 
      <ion-row class="row"> 
       <ion-col class="lightbold">Order Total</ion-col><br> 
       <ion-col class="bold">$ {{item.total}}</ion-col> 
      </ion-row> 
       <ion-row class="pay"> 
       <ion-col>Payment method:</ion-col><br> 
       <ion-col class="color">{{item.payment_method}}</ion-col> 
      </ion-row> 
     </ion-item> 
     <div *ngIf="orderSuccess"> 
      <ion-item *ngFor=" let item of orderDetailsArray"> 
      <div class="div"> Delivery Details </div> 
      <div class="font"> 
       <div>{{item.shipping_firstname}}&nbsp;&nbsp;{{item.shipping_lastname}}</div> 

       <div>{{item.shipping_address_1}}&nbsp;,&nbsp;{{item.shipping_address_2}}</div> 

        <div>{{item.shipping_city}},&nbsp;{{item.shipping_postcode}}</div> 

        <div>{{item.shipping_zone}}</div> 

         <div class="phone"> 
         <ion-icon ios="ios-call" md="md-call" item-left></ion-icon> 
         <span>{{item.telephone}}</span> 
         </div> 
         <div class="mail"> 
          <ion-icon ios="ios-mail" md="md-mail" item-left></ion-icon> 
          <span>{{item.email}}</span> 
         </div> 
       </div> 
      </ion-item> 
      </div> 
</ion-content> 
    <ion-footer> 
    <ion-toolbar color="primary"> 
    <div *ngIf="orderSuccess"> 
     <ion-row class="center" (click)="submit();"> GO BACK HOME </ion-row> 
    </div> 
    <div *ngIf="orderFailure"> 
     <ion-row class="center" (click)="submit();"> GO BACK HOME </ion-row> 
    </div> 
    </ion-toolbar> 
</ion-footer> 

unten ist mein ts-Datei ...

import { Component } from '@angular/core'; 

import { NavController } from 'ionic-angular'; 

import { Rest } from '../../providers/network/rest'; 

import { Logger } from '../../providers/logger/logger'; 



/* 
    Generated class for the ThankYou page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
*/ 
@Component({ 
    selector: 'page-thank-you', 
    templateUrl: 'thank-you.html' 
}) 
export class ThankYouPage { 

    orderDetailsArray = []; 

    public orderSuccess:boolean =false; 

    public orderFailure:boolean =false; 

    constructor(public navCtrl: NavController, 
       public rest: Rest, 
       public logger: Logger) {} 

    ionViewDidLoad() { 

    this.rest.get('/getOrder&order_id=0') 
    .subscribe((result) => { 
     console.log("checking getOrder"+JSON.stringify(result)); 
     if(result.status == '1'){ 
      console.log("success of getOrder"); 
      this.orderDetailsArray=result.order; 
      this.orderSuccess=true;  
     } 

     else{ 
      console.log("error of getOrder"); 
      this.orderFailure = true; 
     } 

    }) 
    } 

    submit(){ 
     //this.navCtrl.setRoot(HomePage,{}); 
    } 
    notSubmit(){ 
     //this.navCtrl.push(PaymentPage,{}); 
    } 

} 

Erfolg Aufruf funktioniert gut, aber Ausfall Anruf ist nicht dis Wiedergabeauftragsdetails ...

Answer 1

Es ist, weil Sie nur die orderDetailsArray einstellen, wenn Ihre result.status1 ist!

Sie sollten es tun, wie folgt:

ionViewDidLoad() { 
    this.rest.get('/getOrder&order_id=0') 
     .subscribe((result) => { 
     console.log("checking getOrder"+JSON.stringify(result)); 

     this.orderDetailsArray=result.order; // <-- place it here ! 

     if(result.status == '1') { 
      console.log("success of getOrder"); 
      this.orderSuccess=true;  
     } 
     else { 
      console.log("error of getOrder"); 
      this.orderFailure = true; 
     } 
    }); 
} 

Answer 2

Sie können dies auch nutzen result.status in Integer.Try zu konvertieren, weil Status immer in Integer-Typ kommen sollte und Sie string.I verwenden hoffen, dass es wird dir helfen.

if(((result.status)*1) == 1) {...}