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

Posted 2023-03-13

技术标签:

【中文标题】将项目添加到 image.onload() 上的数组时，Angular 2 UI 未更新【英文标题】：Angular 2 UI not updating when items added to array on image.onload() 【发布时间】：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 中工作：/ 感谢您为我研究它 【参考方案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");

我的怀疑是