从Firebase显示离子3中的用户数据

时间:2018-04-22 19:42:26

标签: angular ionic-framework ionic3

我的.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不是一个功能]]

如何在html中获取用户信息?

1 个答案:

答案 0 :(得分:0)

您期望在val类型接口的配置文件对象上执行哪个Profile函数?

因为它找不到任何Profile类型的对象,所以它无法执行它并报告错误。添加val功能,它将停止报告。