Angular 2 UI 在 image.onload() 上将项目添加到数组时不更新

Question

我正在尝试将图像添加到数组并将它们显示在屏幕上。在浏览器加载图像之前，我不想显示图像。我在图像对象上指定了 .onload 回调，并将图像添加到该回调中的数组。 UI 仅在点击事件或其他一些 "change event" 发生时更新。我查看了 observables，但觉得对于这么简单的事情来说有点矫枉过正。我相信 angular 1 可以对 class 属性进行某种 $watch。这似乎微不足道...对象已更新，UI 应该反映出来。任何帮助表示赞赏。谢谢:)

这是一个 plunker 演示我正在尝试做的事情。我在构造函数中添加 X 小猫。如果该代码被删除，第一次 "Add Kittens" 按下将不会更新 UI 但随后添加的小猫将显示以前的小猫...

private addItem(itemsArray) { 
    var randomnumber = Math.floor(Math.random() * (500 - 200 + 1)) + 200;  
    var imageObj = new Image();
    imageObj.src = "http://placekitten.com/300/"+randomnumber;

    imageObj.onload = function () {       
        itemsArray.push(imageObj);
    }
}

Answer 1

我无法在 Plunker 中重现（Chrome）

您可以尝试显式调用更改检测

export class App {
  public items: any = []
  constructor(cdRef:ChangeDetectorRef) { // <<<== add parameter
    this.addItems();
  }

  addItems() {
    for(var i = 0; i < 3; i++)
    {
      this.addItem(this.items);
    }
  }

  private addItem(itemsArray) { 
    var randomnumber = Math.floor(Math.random() * (500 - 200 + 1)) + 200;  
    var imageObj = new Image();
    imageObj.src = "http://placekitten.com/300/"+randomnumber;

    imageObj.onload = () => { // <<<== change from function() to () =>     

        itemsArray.push(imageObj);
        this.cdRef.detectChanges(); // <<<== invoke change detection
        //alert("added");
    }
  }
}

我怀疑

imageObj.onload = () => {

无法在所有浏览器上正确修补，如果回调运行在 Angulars 区域之外，它不会收到通知并且不会运行更改检测。

这个

imageObj.addEventListener('load', () => {

也可能会解决它（如果它也能解决它，那将是更好的选择 - 如果无法重现就很难判断 - 我周围没有 Safari）。

Plunker example

Angular 2 UI 在 image.onload() 上将项目添加到数组时不更新

Angular 2 UI not updating when items added to array on image.onload()

javascript

asynchronous

typescript

angular

plunker