Angular2:不会从订阅中更新视图 [英] Angular2: view is not updated from inside a subscription

问题描述

我有一个简单的angular2(rc1)组件，用于订阅服务.服务更新订阅时，我可以将结果记录在组件的订阅中，但视图不会更新.

我最初的怀疑是我的内部this没有绑定到外部的this，但是我在subscribe回调中使用了粗箭头，并且还在的第一行尝试了旧的let self = this构造函数，然后执行self.SuccessMessage = result无济于事.

我是否必须以某种方式强制进行更改检测?这是我的组件:

 import {Component} from 'angular2/core';
import {Subscription} from 'rxjs/Subscription';

import {UploaderService} from './uploader.service';

@Component({
  selector: 'aoma-uploader-status-mini',
  providers: [],
  viewProviders: [],
  templateUrl: './app/uploader/mini-uploader-status.component.html'
})
export class MiniUploadStatusComponent {
  subscription:Subscription;
  successMessage:any = {};

  constructor(private _uploaderService: UploaderService) {
    // view correctly shows this value:
    this.successMessage.serverMessage = 'before ';
    this.subscription = _uploaderService.fileSuccess$.subscribe(result => {
        // this fires and logs the result correctly:
        console.log('the mini uploader: type of result', result);
        // view is never updated here
        this.successMessage = result;
      })
  }

}
 

目前，我的视图中仅包含{{ successMessage | json }}.再次，它正确显示了"before"值，但是当订阅获取结果对象时，它保持不变.

解决方案

_uploaderService似乎在Angulars区域之外运行.当值从其区域之外更改时，Angular不会检测到更改.

要使代码在区域内运行，请使用

   constructor(private _uploaderService: UploaderService, private zone:NgZone) {
    // view correctly shows this value:
    this.successMessage.serverMessage = 'before ';
    this.subscription = _uploaderService.fileSuccess$.subscribe(result => {
        // this fires and logs the result correctly:
        console.log('the mini uploader: type of result', result);
        // view is never updated here

        this.zone.run(() => this.successMessage = result);
      })
  }
 

还有其他方法可以将更改通知Angular 手动更改检测是在AngularJS还是Angular 2中?

如果像在区域外调用router.navigate()那样有其他代码运行，则只有zone.run(...)可以正确解决此问题-除非首先有一种方法可以使您的服务在Angulars区域内运行./p>

I have a simple angular2 (rc1) component which subscribes to a service. When the service updates the subscription, I can log the result in the component's subscription but the view isn't updated.

My initial suspicion was that my inner this wasn't bound to the outer one, but I'm using a fat arrow on the subscribe callback, and also tried the old let self = this on the first line of the constructor and then doing self.SuccessMessage = result to no avail.

Do I have to force the change detection somehow? Here's my component:

import {Component} from 'angular2/core';
import {Subscription} from 'rxjs/Subscription';

import {UploaderService} from './uploader.service';

@Component({
  selector: 'aoma-uploader-status-mini',
  providers: [],
  viewProviders: [],
  templateUrl: './app/uploader/mini-uploader-status.component.html'
})
export class MiniUploadStatusComponent {
  subscription:Subscription;
  successMessage:any = {};

  constructor(private _uploaderService: UploaderService) {
    // view correctly shows this value:
    this.successMessage.serverMessage = 'before ';
    this.subscription = _uploaderService.fileSuccess$.subscribe(result => {
        // this fires and logs the result correctly:
        console.log('the mini uploader: type of result', result);
        // view is never updated here
        this.successMessage = result;
      })
  }

}

Currently my view only has {{ successMessage | json }} in it. Again it correctly displays the 'before' value, but doesn't change when the subscription gets the result object.

解决方案

It looks like _uploaderService runs outside Angulars zone. Angular won't detect changes when values are changed from outside its zone.

To make the code to run inside the zone use

  constructor(private _uploaderService: UploaderService, private zone:NgZone) {
    // view correctly shows this value:
    this.successMessage.serverMessage = 'before ';
    this.subscription = _uploaderService.fileSuccess$.subscribe(result => {
        // this fires and logs the result correctly:
        console.log('the mini uploader: type of result', result);
        // view is never updated here

        this.zone.run(() => this.successMessage = result);
      })
  }

There are also other ways to notify Angular about changes Manual Change Detection in AngularJS or Angular 2?

If there is additional code run like when router.navigate() is called outside the zone, only zone.run(...) will properly solve the issue - except when there is a way to make your service run inside Angulars zone in the first place.

这篇关于Angular2:不会从订阅中更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！