Angular异步管道挂在promise上

Question

这是我的模板的一个片段：

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

这就是功能：

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

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

Answer 1

来自Promise.resolve上的MDN

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

AND

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

对模板表达式的评估应该没有明显的副作用。表达语言本身就是为了保护你的安全。不能为属性绑定表达式中的任何内容赋值，也不能使用递增和递减运算符。

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

修复：

正如wannadream所建议的，将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>