Angular 8 不会等到新值呈现在视图上

Question

我正在尝试使用 window.print() 打印文档，但 angular 不会等到呈现新值。 它不断打印旧值。

我正在尝试像这样将新值分配给 object 后立即打印

obj1.attr1 = "new value"
window.print()

浏览器继续打印旧值。 如何打印新值？

Answer 1

您可以添加一个小值的超时。

setTimeout(() => window.print());

Answer 2

这里的问题是，一旦你更新了值，它不会反映在视图中，直到下一个更改检测周期完成，这将是在执行打印之后。 您可以使用setTimeout来解决这个问题，但这更像是一个 hack IMO。

相反，您可以使用detectChanges手动强制进行更改检测。 这样，新值将反映在视图上，然后才会执行打印。

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

constructor(private cd: ChangeDetectorRef) { }

// ...

obj1.attr1 = "new value";
this.cd.detectChanges();
window.print();

Answer 3

有一个 rxjs-operator observe可以用来观察某个 object 的变化：

import { observe } from "rxjs-observe";
// ...
const obj1 = { attr1: "init" };
const { observables, proxy } = observe(obj1);

// when attr1 of obj1 changed then window.print is called
observables.attr1.subscribe(() => window.print());
// ...
// assign a new value to the property of obj1
proxy.attr1 = "new value";

这个observe操作可以在 这里找到