Angular2：如何使用Promise顯示圖像？

Question

以下是我的組件，我希望使用Promise顯示圖像。以下是我的代碼，瀏覽器運行時無響應。 任何人都可以幫助我解決這個問題。

HTML: 
<img [src]="getImage()" /> 

JS: my.component.ts 

// ... 

public imageUrl:string; 

constructor() { 

    this.imageUrl = "path-to-my-image/image.png"; 
} 

getImage(){ 
    return new Promise((resolve,reject) =>{ 
     // this.imageUrl is not static one, it may fetch from the server 
     resolve(this.imageUrl); 
    }); 
} 

// ... 

Answer 1

當你使用一個函數調用，你是對的src值，角度的變化檢測機制將一遍又一遍調用它。在你的情況下，這將啓動服務器調用數百或數千次。

你想要的是沿着線的東西：

<img [src]="image | async"> 

ngOnInit() {  
    this.imageUrl = "path-to-my-image/image.png"; 
    this.image = this.getImageUrl(); 
} 

getImageUrl() { 
    return new Promise((resolve,reject) =>{ 
    // this.imageUrl is not static one, it may fetch from the server 
    resolve(this.imageUrl); 
    }); 
} 

然而，這將工作只有一次。換句話說，如果再次撥打getImageUrl，則不會發生任何事情。您可能需要的是將網址製作爲流（可觀察）：

<img [src]="image$ | async"> 

ngOnInit() {  
    this.imageUrl = "path-to-my-image/image.png"; 
    this.image$ = this.getImageUrl(); 
} 

getImageUrl() { 
    return Observable.of(this.imageUrl); 
}