将项目添加到 image.onload() 上的数组时，Angular 2 UI 未更新答案

【问题标题】：Angular 2 UI not updating when items added to array on image.onload()将项目添加到 image.onload() 上的数组时，Angular 2 UI 未更新
【发布时间】：2016-10-25 02:49:50
【问题描述】：

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

这是一个plunker，展示了我正在尝试做的事情。我在构造函数中添加 X 小猫。如果删除该代码，第一次“添加小猫”按钮将不会更新 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);
    }
}

【问题讨论】：

这是相同的代码，但构造函数中的初始调用被注释掉了。 plunker。我也在打印src，它似乎工作正常。
您的 plunker 在 Safari 9.1.1 中不起作用。你使用的是什么浏览器？我相信它在 chrome 中成败。第一次点击不会向 UI 呈现任何小猫，随后的点击会呈现之前的小猫。
对我来说它一直在 chrome 中工作，有些图像非常相似，检查 url 以获取线索。
好吧，我也需要它在 Safari 中工作：/ 感谢您为我研究它

标签： javascript asynchronous typescript angular plunker

【解决方案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

【讨论】：

添加事件监听器就像 safari 中的冠军！谢谢！
很高兴听到。我自己没有 Safari 来测试它。