Angular 2 + Typescript在函数内显示变量

Question

我对 typescript 和 Angular 2 完全陌生，在尝试输出到 Cordova / Angular 应用程序中的页面时遇到了一些麻烦。

页面（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);
        });

    }
}

如果您查看我的 cmets，您可以看到哪些有效，哪些无效，我如何访问页面以从 executescript 回调中输出，我希望此时能够显示到页面但也分配到一个变量，以供以后访问。

Answer 1

似乎 Angular 更改检测让您的生活变得艰难，试试这个：

import { ChangeDetectorRef } from '@angular/core'

constructor(private cdr: ChangeDetectorRef) {}

在你的回调中：

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

这告诉 Angular 它应该检查是否有变化，以及是否在 DOM 树中需要渲染。 Here你可以找到文档。