[英]Angular 2 + Typescript displaying variable from within function
I'm completely new to typescript and Angular 2 and I'm having some trouble trying to output to a page within a Cordova / Angular app. 我对Typescript和Angular 2完全陌生,尝试输出到Cordova / Angular应用程序中的页面时遇到了一些麻烦。
Page ( book.html ): 页面(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>
Code ( book.ts ): 代码(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);
});
}
}
If you look at my comments you can see what works and what doesn't, how do I access the page to output from within the executescript callback, id like to be able to display to the page at this point but also assign to a variable for later access too. 如果您查看我的评论,可以看到什么有效,什么无效,如何从executescript回调中访问页面以进行输出,ID既想显示在页面上又可以分配给变量以便以后访问。
Seems like Angular change-detection is making your life hard here, try this: 似乎Angular变化检测使您的生活变得艰难,请尝试以下操作:
import { ChangeDetectorRef } from '@angular/core'
constructor(private cdr: ChangeDetectorRef) {}
and in your callback: 并在您的回调中:
(oBooking) => {
this.oBookingDebug = 'DAVE';
this.cdr.detectChanges();
});
This tells Angular it should check if something changed and if there's something to render in the DOM-tree. 这告诉Angular应该检查是否更改了某些内容以及DOM树中是否有要渲染的内容。 Here you can find the docs. 在这里您可以找到文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.