Angular 异步管道依赖于承诺

Question

这是我的模板的片段：

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

这是函数：

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

这只会挂起浏览器。怎么会？我缺少什么？

Answer 1

来自MDNPromise.resolve

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

和

来自Angular 的避免副作用指南：

模板表达式的求值不应有明显的副作用。表达语言本身就可以保证您的安全。您不能为属性绑定表达式中的任何内容分配值，也不能使用递增和递减运算符。

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

使固定：

按照wandream的建议，将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>