当值更改时，Angular 4 刷新 <img src={{ ... }} >答案

【问题标题】：Angular 4 refresh <img src={{ ... }} > when the value changes当值更改时，Angular 4 刷新 <img src={{ ... }} >
【发布时间】：2018-03-22 03:36:58
【问题描述】：

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

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

currentphoto 包含当前用户照片 url，我从 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 已更新，html 仍显示前一个用户的图像及其烦人（如果我刷新页面它显示新的配置文件图像）..有什么办法可以让

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

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

【问题讨论】：

不应该是[src]="currentphoto"吗？
'currentphoto' 有新值吗？如果值相同（换句话说，图像更改但 url 保持不变），您将必须在 url 中添加一个随机数，作为查询字符串。比如stackoverflow.com/questions/17394440/…
是的，抱歉，如果我没有说清楚。当前照片值包含标准图像网址，因此当用户更改配置文件图像时，当前照片值会更改

标签： javascript jquery html angular typescript

【解决方案1】：

你试过了吗：

<div class="profilphoto">
        <img [src]="currentphoto" >
</div>

【讨论】：

它应该工作，但没有。不知道为什么。角 10。

【解决方案2】：

尝试手动调用changedetection，

constructor(private cdRef: ChangeDetectorRef){

}

一旦你设置了图像

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

【讨论】：

我遇到了和 OP 一样的问题，可以确认这个解决方案可以解决。我的问题是 Angular 在任何时候都会有一个修复，或者这是期望的行为？
实际上，我还必须添加一个随机数，正如上面 Christian 的评论中提到的并在 stackoverflow.com/questions/17394440/… 中解释的那样。这就引出了随机数冲突的问题，这就引出了一个问题，是否有更好的解决方案？

【解决方案3】：

如果没有您的组件/服务的完整代码，很难知道问题出在哪里，但最好的办法是在这一行：

onSubmit = function(form) {

这可能是“this”值的问题。在此行下方（函数内部）插入一个 console.log(this) 并检查“this”是对组件实例还是对窗口的引用。

尝试使用箭头功能：

onSubmit = form => {
 //do what you need here, call the service, etc...
 //and then set the this.currentphoto
}

【讨论】：

【解决方案4】：

这可能不再相关，但如果它可以帮助人们更快地解决这个问题，就在这里。

如果您想在图像更改后更新图像，请像这样编写您的 src：
src='{{currentphoto}}?d={{clock_tick}}'

在您第一次加载组件时初始化时钟滴答（我使用 Date.now()），并在更新图像后再次初始化。这将告诉您的浏览器您更新了图像，它会为您重新加载它。

它对我有用。

【讨论】：