webentwicklung-frage-antwort-db.com.de

Angular 4 Aktualisieren Sie <img src = {{...}}>, wenn sich der Wert ändert

Ich verwende Angular 4 und habe eine Komponente, bei der ich mein aktuelles Benutzerfoto ändern möchte. Der HTML-Code, der das aktuelle Benutzerfoto anzeigt, lautet also .. 

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

currentphoto enthält die aktuelle Benutzer-Foto-URL und ich bekomme sie von der Firebase. Danach zeige ich eine Galerie mit Fotos an, so dass der Benutzer eines auswählen und sein Profil-Foto mit ändern kann ein Formular .. Der Übermittlungscode ist der folgende und funktioniert gut

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

Alles funktioniert gut, außer dass trotz des currentphoto - Werts geändert wurde und die Datenbank-URL aktualisiert wurde. In der HTML-Datei wird immer noch das Bild des vorherigen Benutzers und dessen ärgerliches Verhalten angezeigt (wenn ich die Seite aktualisiere, wird das neue Profilbild angezeigt). Gibt es eine Möglichkeit, die ich machen kann? 

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

erkennen, wann currentphoto den Wert ändert und das Bild mit dem neuen src-Wert anzeigen ??

javascriptjqueryhtmlangulartypescript
7
Vasilis Michail

Versuchen Sie, diechangedetectionmanuell aufzurufen.

constructor(private cdRef: ChangeDetectorRef){

}

Sobald Sie das Bild eingestellt haben

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

Dies ist wahrscheinlich nicht mehr relevant, aber falls es den Leuten helfen könnte, diese Lösung schneller zu lösen, ist es hier.

Wenn Sie das Bild aktualisieren möchten, nachdem es geändert wurde, schreiben Sie Ihre src folgendermaßen:
src = '{{currentphoto}}? d = {{clock_tick}}'

Initialisieren Sie den Takt der Uhr, wenn Sie Ihre Komponente zum ersten Mal laden (ich verwende Date.now ()) und erneut, nachdem Sie das Image aktualisiert haben. Dies teilt Ihrem Browser mit, dass Sie das Bild aktualisiert haben, und lädt es für Sie neu.

Es hat für mich funktioniert.

1
Jean-Francois Bertrand

Ohne den gesamten Code Ihrer Komponente/Dienstleistung ist es schwer zu wissen, was das Problem ist, aber der beste Weg ist in dieser Zeile:

onSubmit = function(form) {

wahrscheinlich ist dies ein Problem mit dem Wert "this". Fügen Sie unterhalb dieser Zeile (innerhalb der Funktion) eine console.log (this) ein und überprüfen Sie, ob "this" eine Referenz auf die Komponenteninstanz oder auf das Fenster ist.

Verwenden Sie die Pfeilfunktion:

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

Hast du das probiert:

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