Question

这是我的模板的片段：

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

这是函数：

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

这只会挂起浏览器。怎么来的？我想念什么？

Answer 1

来自MDN on Promise.resolve

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

AND

来自Angular's Avoid side effects guideline：

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

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

修复：

根据wannadream的建议，将诺言分配给一个属性，然后在模板中使用该属性以及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>

角异步管道挂在了诺言上

1 个答案: