角2アルバム作成

Question

Facebookのようなアルバム作成者にしたいです。

しかし、私はfirebaseストレージに画像を保存し、オブジェクトに入れた画像のURLを取得しますが、新しい画像を追加したりカーソルを移動しただけでは表示がリフレッシュされません。 firebaseからURLを取得したら、自動的にビューを更新できますか？

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

バックエンド

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

あなたは、特定のアクションが行われたときに変化検出をトリガするためにNgZoneを使用することができます。コンポーネントにNgZoneを注入する必要があります。これが完了したら、runを使用してDOMを更新できます。

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

あなたはngZonehereについての詳細を読むことができます。

PS：私はあなたではなくthatを使用するよりもthisを節約するために、新しいarrow funcionsを使用するようにアドバイスします。