Question

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

index.ts

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

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

的index.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的{{1}}

<强>更新

@NgModule()反复拨打getCustomerNameById('1') | async，甚至挂起浏览器最好将getCustomerNameById()（Promise或实际值）的结果分配给属性并改为绑定到该属性。

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

Plunker example

如何在Angular2模板中显示异步承诺函数的结果？

1 个答案: