图像用户Firebase

Question

我创建了一个名为user的界面，其中包含电子邮件属性、密码和照片url。当我在ngOnInit((中加载它时，值user(object(照片url显示src=(未知(我想在标题上显示相关的图像(存储-当我注册/创建用户时(

//user.class.ts
export class User {
email: string;
password: string;
photoUrl: string;
}
//header.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { AuthService } from 'src/app/service/auth.service';
import { User } from 'src/app/share/user.class';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
user: User = new User();
constructor(
private router: Router, 
private auth:AngularFireAuth, 
private authSvc:AuthService
) { }
ngOnInit() {
this.authSvc.isAuth().subscribe(user => {
if(user) {
this.user.photoUrl = user.photoUrl;
console.log(this.user.photoUrl);
}
})
}
//auth.service.ts
isAuth(user: User) {
return this.auth.authState.pipe(map(user => user));
}
//header.html
<ion-avatar>
<img src="{{user.photoUrl}}" />
</ion-avatar>

Answer 1

我制作了一个带有angular和firebase的web应用程序。fUser是firebase的用户，user是我的界面

import { Component, OnInit } from '@angular/core'
import { AngularFireAuth } from '@angular/fire/auth'
import { Observable } from 'rxjs'
import { first } from 'rxjs/operators'
import { User as fUser } from 'firebase'
import { User } from '@models/User'
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
public user$: Observable<fUser> = this.auth.user
public currentUser: User
constructor(
private auth: AngularFireAuth
) { }
ngOnInit() {
this.user$.pipe(first()).toPromise().then(user => {
this.currentUser = user as User
})
}
}