web-dev-qa-db-ja.com

Angular 4値が変化したときに<img src = {{...}}>を更新します

私はAngular 4を使用しており、ユーザーの現在の写真を変更したいコンポーネントを持っているので、現在のユーザーの写真を表示するHTMLコードはこれです。

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

currentphotoには、現在のユーザーの写真のURLが含まれており、firebaseから取得します。その後、写真のギャラリーを表示して、ユーザーは1つを選択し、フォームを使用してプロフィール写真を変更できます。送信コードは次のようになり、正常に機能します

    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値で画像を表示しますか？

javascriptjqueryhtmlangulartypescript
8
Vasilis Michail

changedetectionを手動で呼び出してみてください。

constructor(private cdRef: ChangeDetectorRef){

}

画像を設定したら

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

これはおそらくもう関係ありませんが、人々がこれをより速く解決するのを助けることができる場合は、ここにあります。

変更後にイメージを更新する場合は、次のようにsrcを記述します。
src = '{{currentphoto}}？d = {{clock_tick}}'

最初にコンポーネントをロードするとき（私はDate.now（）を使用します）と、イメージを更新した後に、クロックティックを初期化します。これにより、画像が更新されたことがブラウザに通知され、画像がリロードされます。

それは私のために働いた。

1
Jean-Francois Bertrand

コンポーネント/サービスのコード全体がなければ、何が問題なのかを知ることは困難ですが、ベストショットは次の行です。

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
}
1
Christian Benseler

これを試しましたか：

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