Angular 2 UI wird nicht aktualisiert, wenn Objekte zum Array hinzugefügt werden image.onload()

Question

Ich versuche, Bilder zu einem Array hinzuzufügen und sie auf dem Bildschirm anzuzeigen. Ich möchte die Bilder erst anzeigen, nachdem der Browser sie geladen hat. Ich habe einen .onload-Rückruf für das Bildobjekt angegeben und füge das Bild dem Array innerhalb dieses Callbacks hinzu. Die Benutzeroberfläche wird nur aktualisiert, wenn ein Klickereignis oder ein anderes "Ereignis ändern" eintritt. Ich habe nach Observablen geschaut, aber ich habe das Gefühl, dass das ein bisschen übertrieben für so etwas ist. Ich glaube an eckige 1 gab es eine Art von $ Uhr, die zu Klasseneigenschaften getan werden könnte. Das scheint trivial zu sein ... das Objekt wird aktualisiert, die Benutzeroberfläche sollte es widerspiegeln. Jede Hilfe wird geschätzt. Danke :)

Hier ist eine plunker demonstrieren, was ich versuche zu tun. Ich füge X-Kätzchen im Konstruktor hinzu. Wenn dieser Code entfernt wird, die erste „Kätzchen hinzufügen“ drücken wird die Benutzeroberfläche aber nachfolgende Zugaben von Kätzchen nicht aktualisiert vorherige Kätzchen zeigen ...

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

ich nicht in dem Plunker (mit Chrom) wiedergeben kann

könnten Sie versuchen, explizit Änderungserkennung

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"); 
    } 
    } 
} 

Mein Verdacht aufzurufen

ist, dass

imageObj.onload =() => { 

kann nicht ordnungsgemäß in allen Browsern gepatcht werden. Wenn der Rückruf außerhalb der Angulars-Zone ausgeführt wird, wird er nicht benachrichtigt und führt keine Änderungserkennung durch.

Dieses

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

könnte es auch lösen (und wäre die bessere Option sein, wenn sie es so gut lösen - schwer zu sagen, ohne reproduzieren zu können - ich habe keine Safari um).

Plunker example