我正在使用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值显示图像?
我正在尝试对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)