如何在Angular 2模板中顯示原始圖像尺寸？

我有一個簡單的要求來顯示給定的圖像URI的尺寸原始。像這樣非常簡單的東西。如何在Angular 2模板中顯示原始圖像尺寸？

<div><img src="{{imageUri}}"/></div> 
<p>Image size: {{width}}x{{height}}</p>

我正在使用異步方法來獲取圖像尺寸listening for the "load" event。但在事件處理程序中，我如何更新UI？

我試過簡單地在我的組件中設置this.width和this.height，它實現了OnInit。下面的代碼片段說明了我正在嘗試做什麼，並且我還創建了一個more complete plunk來演示此問題。

constructor() { 
    this.imageUri = 'https://angular.io/resources/images/logos/angular2/angular.svg'; 
    this.width = 0; 
    this.height = 0; 
} 

handleImageLoad(event): void { 
    this.width = event.target.width; 
    this.height = event.target.height; 
} 

ngOnInit(): void { 
    this.version = 2; // Just to prove Angular is working 

    // Set the image height and width 
    var image = new Image(); 
    image.addEventListener('load', this.handleImageLoad); 
    image.src = this.imageUri; 
}

我覺得有一個非常簡單的解決方案，我的思念，或角2一些信條，我無意中侵犯。

來源

2016-10-10 Marty Chang

您可以使用箭頭功能是保持關聯性：

image.addEventListener('load', (e) => this.handleImageLoad(e));

參見Behaviour after scroll event

來源

2016-10-10 19:14:27 yurzui

這是不可思議的，yurzui。我不知道這是爲什麼會起作用，但它確實有效，我會在後面找出原因。謝謝！ –

你可以看一下文檔https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this – yurzui

如何在Angular 2模板中顯示原始圖像尺寸？

回答

相關問題