Angular 4刷新< img src = {{...}}>当值改变时 [英] Angular 4 refresh <img src={{ ... }} > when the value changes

问题描述

我正在使用Angular 4，并且我有一个组件要更改用户当前的照片..因此，显示当前用户照片的html代码是这样.

I am using Angular 4 and I have a component where I want to change my user current photo.. so the html code that displays the current user photo is this..

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

currentphoto 包含当前用户的照片网址，我是从firebase获取的. 之后，我将显示一个照片库，以便用户可以选择其中一个并使用表单来更改其个人照片..提交代码如下，工作正常

currentphoto contains the current user photo url and I get it from firebase.. After that I display a Gallery of photos so the user can select one and change his profil photo using a form.. the submit code is the following and works fine

    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更新后，html仍显示前一个用户的图像及其烦人(如果我刷新页面，则为显示新的配置文件图像..有什么方法可以使

Everything works fine except that despite the currentphoto value has changed and database url upadated the html still displays the previous user's image and its annoying(if I refresh the page it shows the new profil image).. Is there any way I can make

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

检测 currentphoto 何时更改值并显示具有新src值的图像?

detect when currentphoto changes value and Display the image with the new src value??

推荐答案

尝试手动调用 changedetection ，

Try calling the changedetection manually,

constructor(private cdRef: ChangeDetectorRef){

}

设置图像后

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

这篇关于Angular 4刷新< img src = {{...}}>当值改变时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！