Асинхронный канал не отображает обновленное наблюдаемое значение

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: `
    {{ pumpObs | async }}

нажмите меня `, стили: [` h2 {font-weight: normal;} `]}) экспортный класс AppComponent {pumpObs = new Observable (наблюдатель => {наблюдатель.next (" Новая наблюдаемая "); // Предоставляем функцию для изменения значения наблюдаемой ( window) .pump = val =>{console.log (`pumpObs: $ {val}`); Наблюдатель.next (val);}; // Обработчик отмены подписки Noop return this.noop;});noop = () => {};}

Вы можете посмотреть живое демо на https://stackblitz.com/edit/angular-issue-repro2-dmkbhg

Answer 1

Как и в случае с этими вещами, я получил ответ вскоре после публикации этого сообщения. Через @ fmalcher01 :

AsyncPipe делает markForCheck (), таким образом, проверяет компонент при следующем запуске CD. Тем не менее, pump () работает за пределами NgZone, поэтому он не будет уведомлять об изменениях данных, и CD не запускается. Если вы запускаете CD вручную, вызывая DetectChanges (), он будет работать. ( твит )

То же самое работает, когда вы выполняете код pump () в NgZone с NgZone.run () ( твит )

После того, как я получил эту информацию, я нашел следующий SO вопрос: Запуск обнаружения изменений вручную в 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: `
    {{ pumpObs | async }}

нажмите меня `, стили: [`h2 {font-weight: normal; } `] }) класс экспорта AppComponent { pumpObs = new Observable (наблюдатель => { наблюдатель.next («Новая наблюдаемая»); // Предоставляем функцию для изменения значения наблюдаемой ( окно) .pump = val => { console.log (`pumpObs: $ {val}`); observer.next (вал); this.cd.detectChanges (); }; // Noop обработчик отписки вернуть this.noop; }); noop = () => {}; конструктор (общедоступный cd: ChangeDetectorRef) {}

Рабочее демо можно увидеть на https://stackblitz.com/edit/angular-issue-repro2-2trexs