角度异步管道挂在承诺上

Question

这是我的模板的 sn-p：

<div class="explanation">
 {{ foo() | async }}
</div>

这是函数：

  foo(): Promise<string> {
    return Promise.resolve('hello');
  }

这只是挂起浏览器。怎么会？我错过了什么？

Answer 1

来自MDN on Promise.resolve

警告：不要在解析为自身的 thenable 上调用 Promise.resolve。这将导致无限递归，因为它试图将看似无限嵌套的 Promise 展平。

与

来自Angular's Avoid side effects guideline：

模板表达式的评估应该没有可见的副作用。表达语言本身可以保证您的安全。您不能为属性绑定表达式中的任何内容赋值，也不能使用递增和递减运算符。

您的实现似乎就是这样做的。

修复：

按照wanadream 的建议，将promise 分配给一个属性，然后在模板中将该属性与async 管道一起使用：

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

@Component({...})
export class AppComponent  {
  foo: Promise<string>;

  ngOnInit() { 
    this.foo = Promise.resolve('hello'); 
  }
}

在模板中：

<div class="explanation">
  {{ foo | async }}
</div>