Question

我查看了许多资源，包括this，this和this，但我未能达到预期效果。

我要做的就是验证用户身份（使用firebase），然后进行身份验证后，加载他们的个人资料并将其存储在变量userProfile中，然后再加载下一页控制板：

我的登录服务：

public signinUser(user: User) {
    this.af.auth.login({
        email: user.email,
        password: user.password
    },
        {
            provider: AuthProviders.Password,
            method: AuthMethods.Password
        }

    )
        .then(                
        success => {
            console.log('Authenticated');
            this.getProfile().subscribe( // PROBLEM is here
                profile => {
                    console.log(profile);
                    console.log('Profile Loaded');
                    this.router.navigate(['/dashboard']);
                }
            )               
        }
        )
        .catch(function (error) {
            ...
            console.log('ERROR SIGNING USER IN');
        }

我的getProfile()方法：

public getProfile(): Observable<any> {            
        return this.af.database.object('/profiles/' + this.user.uid)
        .flatMap(
            profile => {
                console.log('inside success');
                console.log(profile);
                this.userProfile = <User>profile;                    
                console.log('getProfile has completed');       
                return profile;
            },
            error => {
                console.log(error)
            });

这是日志的一部分：

Authenticated
auth.service.ts:104 ERROR SIGNING USER IN
auth.service.ts:105 TypeError: Cannot read property 'subscribe' of undefined
at auth.service.ts:91
at ZoneDelegate.invoke (zone.js:232)
at Object.onInvoke (ng_zone.js:238)
at ZoneDelegate.invoke (zone.js:231)
at Zone.run (zone.js:114)
at zone.js:502
at ZoneDelegate.invokeTask (zone.js:265)
at Object.onInvokeTask (ng_zone.js:229)
at ZoneDelegate.invokeTask (zone.js:264)
at Zone.runTask (zone.js:154)
auth.service.ts:106 Cannot read property 'subscribe' of undefined
auth.service.ts:184 inside success
auth.service.ts:185 Object {confirmPassword: "123123", email: "aaa@gmail.com2", github: "aaa" name: "a", password: "123123"…}
auth.service.ts:188 
getProfile has completed()
auth.service.ts:185

我可以看到这些方法分别按预期工作。用户进行身份验证，并加载配置文件（显示在日志中）。问题在于订阅事件，原因我不知道。

Answer 1

我认为问题是getProfile并没有真正返回Observable。

您使用flatMap，因此您可以链接可观察序列并将配置文件作为可观察对象返回。但为了使其工作，flatMap内的回调应该返回一个promise或一个observable（正如我从this answer中学到的）。否则，可观察链就会被打破。

所以你可能需要做的是：

public getProfile(): Observable<any> {            
        return this.af.database.object('/profiles/' + this.user.uid)
        .flatMap(
            profile => {
                console.log('inside success');
                console.log(profile);
                this.userProfile = <User>profile;                    
                console.log('getProfile has completed');       
                return Promise.resolve(profile);//<-- this is what needs to be changed
            },
            error => {
                console.log(error)
            });

Answer 2

好的，这很奇怪，但我重新启动了webpack，似乎已经解决了这个问题。

这是代码的外观，它通过promise正确地进行身份验证，然后在成功时加载配置文件然后加载下一页：

我的signinUser方法：

public signinUser(user: User) {
    this.af.auth.login({
        email: user.email,
        password: user.password
    },
        {
            provider: AuthProviders.Password,
            method: AuthMethods.Password
        }

    )
        .then(                
        success => {
            console.log('Authenticated');
            this.getProfile().subscribe(
                profile => {
                    this.router.navigate(['/dashboard']);
                }, 
                error => console.log(error)
            )

我的getProfile方法：

public getProfile(): Observable<User> {        
        return this.af.database.object('/profiles/' + this.user.uid)
        .map(                
            profile => {
                console.log('inside success');
                console.log(profile);
                this.userProfile = <User>profile;                    
                console.log(this.userProfile);        
                return profile;
            },
            error => {
                console.log(error)
            });
}

callstack：


用户已通过身份验证

订阅getProfile并等待方法完成...

GetProfile（）方法执行

个人资料已设置



页面已重定向

Angular2 - 无法在嵌套调用中读取未定义的属性“subscribe”

2 个答案: