Angular 2：在您离开页面并返回之前，在数据服务调用中更改的变量值不会反映在页面上答案

【问题标题】：Angular 2: variable value changed within dataservice call is not reflected on the page until you leave the page and return to itAngular 2：在您离开页面并返回之前，在数据服务调用中更改的变量值不会反映在页面上
【发布时间】：2018-01-08 10:13:26
【问题描述】：

我正在使用 Angular2 并在页面上显示一个变量。该页面有一个按钮，我单击它并调用数据服务。在 dataservice 调用中，我更改了变量的值，并希望更改会反映在页面上。但是，我仍然看到旧值。只有当我单击另一个链接然后返回此页面时，我才能看到反映的新值。我在数据服务调用之外对变量所做的任何更改都会立即反映出来。只有 dataservice 调用中的变化没有反映：下面是一些代码 sn-p：

HTML 模板：

<button type="button" class="btn (click)="clickNextButton()">
    <span>save</span>  
</button>

{{text}}

打字稿类

export class ConfigComponent implements OnInit {
    public text = '';

    ..
    ..
    private clickNextButton(): void {
        this.text = 'abc;
        this.dataService.getConfig()
            .then((config: IConfig): void => {
            console.log('printed');
            this.text = 'xyz';
            console.log('printed..');
        });
    }
}

所以，我单击按钮，页面上的值更改为 abc，但它没有更改为 xyz。控制台日志打印得很好，所以我确定已经到达了代码。为什么我对 dataservice 调用中的变量所做的更改没有反映在页面上？我该如何解决这个问题？

更新：

只有当组件被包含并在另一个组件中使用时才会出现此问题，如：

 <prod-setup
     ....
 </prod-setup>

当我在主组件的 dataService 调用中更改变量值时，它会更改并在视图上很好地反映。只有当我更改包含组件的数据服务调用中的变量时，它才不会反映在 UI 上。有什么想法吗？

【问题讨论】：

使用 chrome 调试工具获取有关行为的更多信息。
尝试在console.log('printed..');之后添加resolve();

标签： angular typescript angular2-template

【解决方案1】：

也许您的异步调用在 ngZone 之外，因此不会触发 UI 更新（Angular 优化了在区域外运行异步调用的应用程序性能）。您可以将代码放入区域检测中：

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

export class ConfigComponent implements OnInit {
    public text = '';
    public constructor(private ngZone: NgZone) { }

    ..
    ..
    private clickNextButton(): void {
        this.text = 'abc;
        this.ngZone.run(() => {
            this.dataService.getConfig()
                .then((config: IConfig): void => {
                console.log('printed');               
                this.text = 'xyz';                             
                console.log('printed..');
            });
        });
    }
}

【讨论】：

不能解决问题
好的。尝试更改角度区域运行的调用 - 我编辑了我的答案，this.ngZone.run 包含this.dataService.getConfig()
我在原始问题下添加了“更新”部分。当我在包含的组件中而不是在主组件中更改变量时，这个问题似乎更具体。知道为什么吗？
您是否只提供一次服务？我的意思是，您是否仅在某些包含视图的主模块中提供dataService，即app.module.ts？
是的，事实上，即使使用 setTimeout 中的代码也会出现此问题。任何设置的变量都会立即反映在 UI 上。 DataService 调用或 setTimeout 等中的任何内容都不会反映（仅当它是主组件中包含的组件时）

【解决方案2】：

您也可以使用resolve()，以便调用函数得到通知并可以执行任何后期处理。

private clickNextButton(): void {
        this.text = 'abc;
        this.dataService.getConfig()
            .then((config: IConfig): void => {
            console.log('printed');
            this.text = 'xyz';
            this.text = resolve();     

        });
    }

另一种选择是调用另一个设置值的函数

     private clickNextButton(): void {
        this.text = 'abc;
        this.dataService.getConfig()
            .then((config: IConfig): void => {
            console.log('printed');
            this.text = 'xyz';
            this.text = resolve('xyz');
            this.setValue();     

        });
    }
    setValue(): void{
        this.text
    }

【讨论】：

不能解决问题
当我使用resolve()时，编译器抱怨它找不到resolve()。所以，我之前尝试过 Promise.resolve() 。你说resolve()就是这个意思吗？
是的，它是Promise.resolve()。是否解决了您的问题？
不，我尝试了你提到的两种方法，但都没有解决问题
@user1892775，如果可行，请不要忘记投票并接受答案:)

【解决方案3】：

数据服务的 this.text 是否超出范围？即，尝试：private clickNextButton =(): void => { 还可以设置消息服务，在更新时向组件返回消息。

angular 4 service cannot read property 'newService' of undefined

【讨论】：