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

您可以阅读更多关于ngZone 这里的内容。

ps：我建议您使用新的arrow funcions来保存this，而不是使用that。