Angular 2 Album erstellen

Question

Ich möchte einen Album Creator wie auf Facebook machen.

Aber wenn ich ein Bild in den Firebase-Speicher speichern und ich bekomme die URL zu dem Bild, das ich in ein Objekt, aber die Ansicht ist nicht erfrischend, nur wenn ich ein neues Bild hinzufügen oder den Cursor bewegen. Wie kann ich die Ansicht automatisch aktualisieren, wenn ich die URL von Firebase bekomme?

<div class="row pics"> 
     <div class="col-md-4 col-xs-4"> 
      <div class="newItem text-center"> 
       <a (change)="addPicture($event)" class="newAlbum"><input type="file" id="file"/>Add Picture</a> 
      </div> 
     </div> 

     <div class="col-md-4 col-xs-4" *ngFor="let item of newAlbum.pictures; let i = index"> 
      <div class="Item"> 
       <img src="{{item?.pictureS}}" alt="" > 
      </div> 
      <textarea class="picture-desc" placeholder="Say something about this photo..." (keyup)="onKey($event,i)">{{item.desc}}</textarea> 
     </div> 
    </div> 

Backend

readPicture() { 
    this.picItem = { pictureS: '', pictureF: this.file, desc: '' }; 
    let that = this; 
    let uploadTask = this.data.albumUpload(this.newAlbum.dirname,this.file.name,this.file); 

    uploadTask.on('state_changed', function(snapshot) { 
     var progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100; 
     console.log('Upload is ' + progress + '% done'); 
    }, function(error) { 
    }, function() { 
     that.picItem.pictureS = uploadTask.snapshot.downloadURL; 
     console.log(' NEW UPLOAD...'); 
     that.newAlbum.pictures.push(that.picItem); 
     } 
    ); 
} 

addPicture(e){ 
    this.file = e.target.files[0]; 
    this.readPicture();  
} 

onKey(e,i){ 
    this.newAlbum.pictures[i].desc = e.target.value; 
} 

albumUpload(form: NgForm){ 
    this.newAlbum.title = form.value.album_title; 
    this.newAlbum.desc = form.value.album_desc; 
} 

Answer 1

könnten Sie verwenden NgZone zu Änderungserkennung auszulösen, wenn bestimmte Aktionen durchgeführt werden. Sie müssen NgZone in die Komponente injizieren. Sobald das erledigt ist, können Sie run verwenden, um DOM zu aktualisieren.

constructor(public zone: NgZone){} 
    that.zone.run(() => 
    that.newAlbum.pictures.push(that.picItem); 
    }); 

können Sie mehr über ngZonehere lesen.

ps: Ich würde empfehlen Ihnen neue arrow funcions zu verwenden this eher zu sparen als that verwenden.