web-dev-qa-db-fra.com

Angular 4 actualise <img src = {{...}}> lorsque la valeur change

J'utilise Angular 4 et j'ai un composant dans lequel je veux changer la photo actuelle de l'utilisateur .. le code HTML qui affiche la photo de l'utilisateur actuel est donc ceci .. 

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

currentphotocontient l'URL de la photo de l'utilisateur actuel, que je récupère depuis firebase .. Après cela, j'affiche une galerie de photos afin que l'utilisateur puisse en sélectionner une et modifier sa photo de profil à l'aide d'un formulaire .. le code de soumission est le suivant et fonctionne bien

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

Tout fonctionne bien sauf que malgré la valeurcurrentphoto, la valeur a changé et l'URL de la base de données mise à jour, le html affiche toujours l'image de l'utilisateur précédent et son ennui (si j'actualise la page, la nouvelle image de profil). il n'y a aucun moyen que je puisse faire 

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

détecter quand currentphoto change de valeur et afficher l'image avec la nouvelle valeur src ??

javascriptjqueryhtmlangulartypescript
7
Vasilis Michail

Essayez d’appeler lechangedetectionmanuellement,

constructor(private cdRef: ChangeDetectorRef){

}

Une fois que vous définissez l'image

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

Ce n'est probablement plus pertinent, mais au cas où cela pourrait aider les gens à résoudre ce problème plus rapidement, le voici.

Si vous souhaitez mettre à jour l'image après l'avoir modifiée, écrivez votre src comme suit:
src = '{{currentphoto}}? d = {{clock_tick}}'

Initialisez votre coche d'horloge lorsque vous chargez votre composant pour la première fois (j'utilise Date.now ()) et à nouveau après avoir mis à jour l'image. Cela indiquera à votre navigateur que vous avez mis à jour l'image et le rechargera pour vous.

Cela a fonctionné pour moi.

1
Jean-Francois Bertrand

Sans le code complet de votre composant/service, il est difficile de savoir quel est le problème, mais le meilleur coup reste dans cette ligne:

onSubmit = function(form) {

c'est probablement un problème avec la valeur 'this' . Insérez un fichier console.log (this) sous cette ligne (dans la fonction) et vérifiez si 'this' est une référence à l'occurrence du composant ou à la fenêtre.

Essayez d'utiliser la fonction flèche:

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

Avez-vous essayé ceci:

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