1

私は型スクリプトと角2を初めて使用しています。私はCordova/Angularアプリケーション内のページに出力しようとするといくつか問題があります。角2 +関数内から変数を表示するTypescript

ページ(book.html):

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Book</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h3>Book</h3> 

    <p> 
    Book page. 
    </p> 
    <p> 
    <span>{{ oBookingDebug }}</span> 

    </p> 

</ion-content> 

コード(book.ts):

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { InAppBrowser } from '@ionic-native/in-app-browser'; 

@Component({ 
    selector: 'page-book', 
    templateUrl: 'book.html' 
}) 
export class BookPage { 
    public oBookingDebug: string = ""; 

    constructor(public navCtrl: NavController, public iab: InAppBrowser) { 

     this.oBookingDebug="TEST"; // <-- WORKS AND SHOWS ON THE PAGE!! 

     const browser = this.iab.create('http://**'); 
     browser.on("loadstop") 
     .subscribe(
     () => { 
      browser.executeScript(
      { 
       code:'localStorage.getItem("bookingObject");' 
      }).then(
       (oBooking)=>{ 
        alert(oBooking); // Test 
        this.oBookingDebug="DAVE"; // <-- DOESNT WORK!! 
       }); 
     }, 
     err => { 
      console.log("InAppBrowser Loadstop Event Error: " + err); 
     }); 

    } 
} 

あなたは私のコメントを見れば、あなたはdoesnの何動作し、ものを見ることができますexecutecriptコールバック内から出力するページにアクセスするにはどうすればいいのでしょうか?この時点でページに表示できるようにしたいのですが、後でアクセスするために変数に割り当てることもできます。

import { ChangeDetectorRef } from '@angular/core' 

constructor(private cdr: ChangeDetectorRef) {} 

をし、自分のコールバックで:

答えて

2

は、ハードここにあなたの人生を作っている角度変化検出のように思える、これを試してみてください

(oBooking) => { 
    this.oBookingDebug = 'DAVE'; 
    this.cdr.detectChanges(); 
}); 

これは伝え角度、それは何かが変化したかどうかをチェックし、もし必要がありますDOMツリーにレンダリングするものがあります。 Hereあなたはドキュメントを見つけることができます。

+0

これは簡単なことだと誰が知っていたのでしょう、ありがとう。 –

+0

うれしい私は助けることができました!変更検出は、何か(通常は動作する)があなたが行うべきことを何かしていない場合、常に良いヒントです。 – David

関連する問題