将项目添加到image.onload（）的数组时，Angular 2 UI不更新

Question

我正在尝试将图像添加到阵列并将其显示在屏幕上。在浏览器加载图像之前，我不希望显示它们。我在图像对象上指定了.onload回调，并将图像添加到该回调中的数组中。仅在发生点击事件或其他“更改事件”时才更新UI。我看了看可观察的东西，但是觉得这对于一些简单的东西来说有点过大了。我相信在angular 1中可以使用某种$ watch来对属性进行分类。这似乎微不足道...对象已更新，UI应该反映出来。任何帮助表示赞赏。谢谢 ：）

这里是一个plunker示范什么，我试图做的。我在构造函数中添加了X只小猫。如果删除了该代码，则第一次按“添加小猫”的操作不会更新用户界面，但随后添加的小猫会显示以前的小猫...

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）。

柱塞示例