Question

我遇到一个问题，在我的视图中异步可观察对象没有显示可观察对象的更新值。

据我了解，您只需使用模板中的异步管道（例如<p>Hello, {{ name | async }}</p>）就可以在视图中公开最新的观察值。但是，在这种情况下，新值是在Angular的世界视图之外发出的，这似乎使Angular忽略了更新的值，直到其他事件触发了视图更新。

我还尝试在组件的构造函数中订阅可观察的对象，并手动将更新后的值作为组件的属性公开，但这也不起作用。

这是我的最小回购案例。

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  // Replace with your markup
  template: `
    <pre>{{ pumpObs | async }}</pre>
    <button (click)="noop">click me</button>
  `,
  styles: [ `h2 { font-weight: normal; }`]
})

export class AppComponent  {
  pumpObs = new Observable(observer => {
    observer.next("New observable");

    // Expose a function to modify the observable's value
    (<any>window).pump = val => {
      console.log(`pumpObs: ${val}`);
      observer.next(val);
    };

    // Noop unsubscribe handler
    return this.noop;
  });

  noop = () => {};
}

您可以在https://stackblitz.com/edit/angular-issue-repro2-dmkbhg观看实时演示

Answer 1

就像这些事情一样，发布此消息后不久我得到了答案。通过@fmalcher01：

AsyncPipe执行markForCheck（），因此可以在下一次CD运行中检查组件。但是，pump（）在NgZone外部运行，因此它不会通知更改的数据，也不会运行CD。如果您通过调用detectChanges（）手动触发CD，它将起作用。（tweet）

当您使用NgZone.run（）（tweet）在NgZone中执行pump（）代码时，同样的工作原理

获得该信息后，我发现了以下SO问题：Triggering change detection manually in Angular

// Copyright 2019 Google LLC.
// SPDX-License-Identifier: Apache-2.0

import { Component, ChangeDetectorRef } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  // Replace with your markup
  template: `
    <pre>{{ pumpObs | async }}</pre>
    <button (click)="noop">click me</button>
  `,
  styles: [ `h2 { font-weight: normal; }`]
})

export class AppComponent  {
  pumpObs = new Observable(observer => {
    observer.next("New observable");

    // Expose a function to modify the observable's value
    (<any>window).pump = val => {
      console.log(`pumpObs: ${val}`);
      observer.next(val);
      this.cd.detectChanges();
    };

    // Noop unsubscribe handler
    return this.noop;
  });

  noop = () => {};

  constructor(public cd: ChangeDetectorRef) {}

您可以在https://stackblitz.com/edit/angular-issue-repro2-2trexs上查看正在运行的演示

异步管道不显示更新的可观察值

1 个答案: