Angular - 当承诺得到解决时更新 HTML

Question

我对 Angular 和 Promises 有疑问，我不明白。

这是我的html：

<div>Is Ready? {{isReady}}</div>
<div *ngIf="isReady">Show this</div>
<div *ngIf="!isReady">Show that</div>

这是我的 TS 文件：

isReady: boolean = false;

constructor(
 private myService: MyService){
 await this.giveMeSlowData();
}

async giveMeSlowData() : Promise<void>{
 console.log(await this.myService.getResult());
 this.isReady = await this.myService.getResult();
}

通常，一旦 TS 文件中的变量发生变化，HTML 中的 {{}} 中的所有内容都会发生变化。 但现在不行。 5-6 秒后我可以看到控制台日志，但 HTML 没有改变。为什么？

谢谢大家！

Answer 1

有几个原因导致此操作从未完成但您仍收到控制台日志。

实际问题

你有一个

async

方法，它永远不会返回任何内容。这使得

Promise

永远悬着。由于在构造函数中对挂起的

await

调用了

Promise

，因此组件将永远不会完成初始化。您可以通过在

ngOnInit

中添加日志语句来测试这一点。

推荐

1. 我强烈鼓励您改用 Observable，因为这是 Angular 世界的标准做法。许多组件销毁的事情都会以这种方式自动为您处理。您甚至可以在不需要更改

   MyService

   的任何逻辑的情况下执行此操作，如果必须保留为基于

   Promise

   的类，这会很方便。

2. 所有初始化逻辑都应在

   ngOnInit

   方法中处理，而不是在构造函数中。

3. 我鼓励您在所有这些方面改用模板中的

   async

   管道。

解决方案

这就是这一切如何结合在一起的。

slow-data.component.ts

：

isReady: Subject<boolean> = new BehaviorSubject(false);

constructor(
 private myService: MyService,
) {
}

ngOnInit(): void {
  giveMeSlowData();
}

giveMeSlowData(): void {
  from(this.myService.getResult()).subscribe(isReady);
}

slow-data.component.html

<div>Is Ready? {{isReady | async}}</div>
<div *ngIf="isReady | async">Show this</div>
<div *ngIf="!(isReady | async)">Show that</div>

Answer 2

为什么要调用 this.myService.getResult() 两次？ 试试这个：

async giveMeSlowData() : Promise<void>{
 this.isReady = await this.myService.getResult();
 console.log(this.isReady);
}