Angular異步管道掛在了Promise上

Question

這是我的模板的片段：

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

這是功能：

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

這只是掛起瀏覽器。 怎么會？ 我想念什么？

Answer 1

從Promise.resolve MDN

警告：請勿在解析為自身的thenable上調用Promise.resolve。 這將導致無限遞歸，因為它試圖展平似乎是無限嵌套的承諾。

和

從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>