angular - 如何在 Angular2 模板中显示异步 promise 函数的结果？

Question

我正在寻找的伪代码如下所示，但它会导致我的浏览器挂起。

索引.ts

findCustomerById(id) {
    return new Promise<string>((resolve, reject) => {
        resolve("hi");
    });
}

getCustomerNameById(id: string) {
    return this.findCustomerById(id);
    //findCustomerById returns NEW Promise<string>
}

索引.html

<p>Customer: {{ getCustomerNameById('1') | async }} </p>
//this does not show anything

<p>Customer: {{ getCustomerNameById('1') | async | json }} </p>
//this shows null

<p>Customer: {{ getCustomerNameById('1') | json }}</p>
//this shows the following
{
  "__zone_symbol__state": true,
  "__zone_symbol__value": "hi"
}

这是 Plunker: https://plnkr.co/edit/pAKtCZo0Uog2GFzlj50c

Answer 1

消除

pipes: [...],
directives: [...],

来自 @Component()
并添加 imports: [BrowserModule]至 AppModule的 @NgModule()
更新
getCustomerNameById('1') | async来电 getCustomerNameById()反复甚至挂起我的浏览器。
最好分配 getCustomerById() 的结果( promise 或实际值)到属性并绑定(bind)到该属性。

在 Angular2 中，绑定(bind)到每次调用时都返回新值的方法通常是个坏主意。

Plunker example