終了イベント後にテンプレート変数が更新されないIonic2

Question

InAppBrowser終了イベントの後にテンプレートを変更しようとしています。イベント内での変数の変更は、console.log（）にログインしていますが、テンプレートは変更していません。

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import {InAppBrowser} from 'ionic-native';  

@Component({ 
    selector: 'page-list', 
    templateUrl: 'list.html' 
}) 
export class ListPage { 
    browser:any; 
    exit:boolean = false; 
    name:string = "hero"; 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 

    startPayment(){ 
    let lastUrl:string; 
    this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done'); 
    this.browser.on("exit") 
      .subscribe(
      e => { 
       this.name = "zero"; 
       console.log(this.name); 
      }, 
      err => { 
       console.log("InAppBrowser loadstart Event Error: " + err); 
      }); 

    this.browser.on("loadstop") 
      .subscribe(
      e => { 
       console.log(e); 
       lastUrl = e.url; 
      }, 
      err => { 
       console.log("InAppBrowser loadstart Event Error: " + err); 
      }); 
    }; 

    changeName(){ 
    this.name = 'abcd'; 
    } 

とテンプレート

<ion-content> 
    <button ion-button color="primary" (click)="startPayment()">Pay Now</button> 
    <p> 
    {{name}} 
    </p> 
    <button ion-button color="primary" (click)="changeName()">change</button> 
</ion-content> 

イベントがにconsole.logで働いて、InAppBrowser出口のイベントですが、テンプレート{{exit}}を変更されていません。

しかし、下のボタンを使用すると、サードパーティのライブラリや角2外で動作するものを使用する場合、あなたはその角度あなたの角度の文脈の中にそのライブラリを持ってngZoneを使用する必要があり、それは一般的なルールとして

Answer 1

を働いているクリック物事をすることができます。

コンストラクタにゾーンを注入します。

constructor(public navCtrl: NavController, public navParams: NavParams, public zone: NgZone) { 
} 

インポートからngZone角度/コア@は

その後のコールバックであなたの角度アプリのコンテキストを使用します。

startPayment(){ 
    let lastUrl:string; 
    this.browser = new InAppBrowser('https://ionic.io', '_blank','location=no,toolbar=no,hardwareback=no,EnableViewPortScale=yes,closebuttoncaption=Done'); 
    this.browser.on("exit") 
      .subscribe(
      e => { 
       this.zone.run(() => { 
        this.name = "zero"; 
       });     
       console.log(this.name); 
      }, 
      err => { 
       console.log("InAppBrowser loadstart Event Error: " + err); 
      }); 

    this.browser.on("loadstop") 
      .subscribe(
      e => { 
       console.log(e); 
       this.zone.run(() => { 
        lastUrl = e.url; 
       });     
      }, 
      err => { 
       console.log("InAppBrowser loadstart Event Error: " + err); 
      }); 
    }; 

幸い！