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 here的更多信息。

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

Angular 2专辑创建

1 个答案: