如何在Angular2模板中顯示異步承諾函數的結果？

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

從@Component()刪除

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

，並添加imports: [BrowserModule]到AppModule的@NgModule()

更新

getCustomerNameById('1') | async調用getCustomerNameById()反覆，甚至掛起我的瀏覽器。
將getCustomerById()（Promise或實際值）的結果分配給屬性並將其綁定到該屬性會更好。

綁定到每次調用時都會返回一個新值的方法在Angular2中通常是一個壞主意。

Plunker example