如何使用ng in in ionic 2显示细节

时间:2016-12-22 06:54:16

标签: html angular ionic2

enter image description here我在项目中感谢您的页面。在成功通话时,它将显示订购详情和交货详情&失败呼叫它只会显示ORDER DETAILS ..

成功通话工作正常,但未通过电话显示订单明细...

下面是我的HTML代码..

<!--
  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> 

下面是我的ts文件......

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,{});
   }

}

成功通话工作正常但失败通话未显示订单明细......

2 个答案:

答案 0 :(得分:0)

这是因为如果result.status1,您只需设置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; } }); }

你应该这样做:

template<class Fn, class... Args> void ui::addExecutable(Fn&& fn, Args&&... args)
{
        va_list argptr;
        va_start(argptr, fn);
        ToBeExecuted.push_back(bind<Fn, Args...>(fn, argptr));
}

答案 1 :(得分:0)

您也可以使用它将result.status转换为Integer。试试这个因为status应该总是以整数类型出现并且您正在使用string。我希望它能帮助您。

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