HTML标记img的属性onload在Angular2中不起作用

Question

我需要检测html <img>标记中的图像是否完全加载。

这是我在Angular2组件模板中的代码。

  <li *ngFor="let id of imagesId">
       <img width="300" src="{{imagesUrl[id]}}" 
            *ngIf="imagesUrl[id]"
            (onload)="loadOk(id)">
    <div *ngIf="!imagesLoadStatus[id]" class="loader"></div>
  </li>

这是我在此组件中的代码：

  loadOk(id: number) {
    this.imagesLoadStatus[id] = 1;
  }

在完全加载之前，所有imagesLoadStatus[id]等于0，并且当整个图片完全加载时，我想通过事件1将其更改为onload。

但它根本不起作用。如何在Angular2中检测图像是否完全加载，请帮我弄明白。

Answer 1

(onload)="loadOk(id)">

应该是

(load)="loadOk(id)">

没有onload个事件，只有load个事件。 onload用于JS注册事件监听器，但它不是Angulars事件绑定所需的事件名称。