在来自 firebase 的 ionic 3 中显示用户数据

Question

我对 .val() 属性有疑问。

this.userProfile = profile.val(); <<<< 问题来了

import { Component, OnInit } from "@angular/core";
import { AuthService } from "../../providers/auth/auth.service";
import { DataService } from "../../providers/data/data.service";
import { User } from 'firebase/app'
import { Profile } from "../../models/profile/profile.interface";
import jQuery from "jquery";
import { getQueryValue } from "@angular/core/src/view/query";
import { USER_LIST } from "../../mocks/profiles/profile";

@Component({
    selector: 'app-profile-view',
    templateUrl: 'profile-view.component.html'
})

export class ProfileViewComponent implements OnInit {

    userProfile: Profile;
     
    
    ngOnInit(): void {
           this.auth.getAuthenticatedUser().subscribe((user: User) => {
                this.data.getProfile(user).valueChanges().subscribe(profile => {
                  this.userProfile = <Profile>profile.val(); <<<< here is the problem>>>>>>   

            })
        })

这是配置文件界面

export interface Profile {
firstName: string;
lastName: string;
avatar: string;
email: string;
dateOfBirth: Date;


}

这是来自 /mocks

的 profile.ts

import { Profile } from '../../models/profile/profile.interface';

const userList: Profile[] = [
{firstName: 'ahmed', lastName: 'hallaq', email: 'a.m.hq@hotmail.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() },
{firstName: 'ahmed', lastName: 'hallaq', email: 'a.m.hq@hotmail.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() },
{firstName: 'ahmed', lastName: 'hallaq', email: 'a.m.hq@hotmail.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() },
{firstName: 'ahmed', lastName: 'hallaq', email: 'a.m.hq@hotmail.com', avatar: 'assets/img/avatar.png', dateOfBirth: new Date() },


];

export const USER_LIST = userList;

这来自 html 文件，我希望它显示数据库中的名字

<ion-item>
            <ion-label floating>First Name</ion-label>
            <ion-input [value]="userProfile.firstNAme" [readonly]="true"></ion-input>
        </ion-item>

当我使用 ionic serve 时，它给我 [[profile.val is not a function]]

Answer 1

为什么要使用 .val()？它不可能是配置文件的函数，您甚至可以显示没有 val() 函数的配置文件界面。

可以这样设置吗？订阅中个人资料的价值是多少？

ngOnInit(): void {
    this.auth.getAuthenticatedUser().subscribe((user: User) => {
        this.data.getProfile(user)
            .valueChanges()
            .subscribe((profile: Profile) => {
                 this.userProfile = profile; 
                 // What is the value of profile? Console log it? Debug it?
    })
})

在来自 firebase 的 ionic 3 中显示用户数据

Displaying users data in ionic 3 from firebase

node.js

firebase

angularfire

ionic3

angular