当值改变时,Angular 4刷新<img rel="nofollow noreferrer" src = {{...}}>

Question

我正在使用Angular 4,我有一个组件,我想更改我的用户当前的照片..所以显示当前用户照片的HTML代码是这个..

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>

currentphoto包含当前用户的照片网址,我从firebase获取它.之后,我显示了一个照片库,以便用户可以选择一个并使用表单更改他的个人资料照片..提交代码如下,工作正常

    onSubmit = function(form) {
    this.photoUrl = form.photoUrl;
    firebase.database().ref("users/"+this.authService.cusername+"/photo").update({
      url: form.photoUrl
    }).then(()=>{
      this.currentphoto = this.authService.photourl;
      console.log("currentphoto:"+this.currentphoto);
    }
    );
  }

一切正常,只是不顾currentphoto值已发生变化,数据库URL upadated的HTML仍显示前一个用户的图像和恼人的(如果我刷新页面,它显示了新PROFIL图片)..有什么办法可以使

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>

检测currentphoto何时更改值并使用新的src值显示图像？

Answer 1

尝试changedetection手动调用,

constructor(private cdRef: ChangeDetectorRef){

}

设置图像后

 this.currentphoto = this.authService.photourl;
 this.cdRef.detectChanges();