小编Vas*_*ail的帖子

当值改变时,Angular 4刷新<img rel="nofollow noreferrer" src = {{...}}>

我正在使用Angular 4,我有一个组件,我想更改我的用户当前的照片..所以显示当前用户照片的HTML代码是这个..

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>
Run Code Online (Sandbox Code Playgroud)

currentphoto包含当前用户的照片网址,我从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);
    }
    );
  }
Run Code Online (Sandbox Code Playgroud)

一切正常,只是不顾currentphoto值已发生变化,数据库URL upadated的HTML仍显示前一个用户的图像和恼人的(如果我刷新页面,它显示了新PROFIL图片)..有什么办法可以使

<div class="profilphoto">
        <img src= {{currentphoto}}>
</div>
Run Code Online (Sandbox Code Playgroud)

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

html javascript jquery typescript angular

8
推荐指数
1
解决办法
6666
查看次数

Angular 4 jQuery不起作用

我正在尝试对Angular 4应用程序使用jquery。我已经按照所有步骤在Angular 4上安装了jquery,但是jquery仍然无法正常工作。我已经将jQuery代码放在这样的组件上。

home.component.ts

import * as jQuery from 'jquery'
import { Component, OnInit } from '@angular/core';


 @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(db: AngularFireDatabase,public authService: AuthService,public 
afAuth: AngularFireAuth,) { 
$(document).ready(function(){
  $("#showAppinfo").click(function(){
      $("#appinfo").slideToggle();
  });
});
ngOnInit()
{}
}
Run Code Online (Sandbox Code Playgroud)

我的HTML是以下home.component.html

    <h1>This is Home page!!</h1>
    <h2 id="showAppinfo">Basic App-info</h2>
    <ul class="list-group" id="appinfo">
      <li class="list-group-item">Publiser: {{ (appinfo | async)?.Publisher }}</li>
      <li class="list-group-item">Publication_Year: {{ (appinfo | async)?.Publication_Year }}</li>
      <li class="list-group-item">Version: {{ (appinfo | async)?.Version }}</li>
      <li class="list-group-item">Registered …
Run Code Online (Sandbox Code Playgroud)

javascript jquery typescript angular

5
推荐指数
1
解决办法
2521
查看次数

标签 统计

angular ×2

javascript ×2

jquery ×2

typescript ×2

html ×1