Angular 2テンプレートで元の画像の寸法を表示するにはどうすればよいですか？

Question

私は元の画像URIの元のの寸法を表示するという簡単な条件があります。このような非常に単純なもの。

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

画像サイズを取得するための非同期アプローチを使用しています。listening for the "load" eventしかし、イベントハンドラでUIをどのように更新できますか？

OnInitを実装する私のコンポーネントにthis.widthとthis.heightと設定するだけで、下のスニペットは私が何をしようとしているのかを示しており、問題を示すために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のいくつかの信条がありますように私は感じます。

Answer 1

あなたはコンテキストを保持するために、矢印の機能を使用することができます。

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

も参照してくださいBehaviour after scroll event