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

【问题标题】：Displaying users data in ionic 3 from firebase在 ionic 3 中显示来自 firebase 的用户数据
【发布时间】：2018-04-21 03:06:33
【问题描述】：

我的 .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>

当我做离子服务时，它给了我 [[profile.val is not a function]]

【问题讨论】：

标签： node.js angular firebase ionic3 angularfire

【解决方案1】：

为什么要使用 .val()？它不可能是 profile 的函数，你甚至显示 Profile 接口，它没有 val() 函数。

你可以这样设置吗？订阅中 profile 的价值是什么？

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?
    })
})

【讨论】：