javascript - 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);
        });

    }
}

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

Answer 1

似乎 Angular 变化检测让你的生活变得艰难，试试这个:

import { ChangeDetectorRef } from '@angular/core'

constructor(private cdr: ChangeDetectorRef) {}

在你的回调中:

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

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