Question

我使用TypeScript遇到了Angular 2的问题，我可以使用额外的一组眼睛。我正在从API中请求一个令牌很好的令牌。在我的响应处理程序中，我正在检查基本错误并将其显示给最终用户。如果我从控制台注销错误和我的消息，它会正确显示，但视图/模板不会更新。

在我的课堂上，我有以下内容：

public message: string;

在我的构造函数中，我有：

constructor() {
    this.message = 'Message to enduser';
}

我的两种方法如下：

myRequest() {
    (<any>window).privateAPI.getToken({
        token: this.tmpData.token
    }, this.responseHandler);
    return false;
}

responseHandler(response: any) {
    setTimeout(function() {
        if (response.error) {
            // this.message update is not updating in the template
            this.message = response.error.message;
            console.log('error: ', this.message);
        } else {
            // success
        }
    }, 100);
}

非常感谢任何帮助。

Answer 1

我能够通过使用ngZone来解决这个问题。以下解决了我的组件未在API响应中更新模板的问题。

// import NgZone
import {Component, NgZone} from '@angular/core';

// pass NgZone to constructor
constructor(private _zone: NgZone) {
    this.message = 'Message to enduser';
}


requestToken() {
    (<any>window).privateAPI.getToken({
    token: this.tmpData.token
    }, (status: number, response: any) => {
        this._zone.run(() => {
            if (response.error) {
                this.message = response.error.message;
            } else {
              // good to go
            }
        });
    });
}

Answer 2

这是因为您在setTimeout内创建了新的上下文。关键字function会自动执行此操作。在TypeScript中，您可以使用lambdas（在Lambdas下并使用它），也称为arrow-functions。使用lambda时，会在创建函数时自动捕获可用的函数，而不是在调用函数时。

试试这个：

setTimeout(() => {
    if (response.error) {
        // this.message update is not updating in the template
        this.message = response.error.message;
        console.log('error: ', this.message);
    } else {
        // success
    }
}, 100);

使用TypeScript的Angular 2：在响应处理程序中设置变量后查看不更新

2 个答案: