如何在angularfire2中顯示一個對象的相關對象信息

我是Angular和Firebase的新手，所以如果問題不重要，我很抱歉。如何在angularfire2中顯示一個對象的相關對象信息

我想知道如何在angularfire2中顯示一個對象的相關對象信息？

基本上，我想顯示分配給用戶的角色名稱。

以下是我在Firebase數據庫中的內容。

role : { 
    roleKey1 : { 
    name : Designer 
    ... 
    }, 
    roleKey2 : { 
    name : Manager 
    ... 
    } 
}, 
user: { 
    userKey1 : { 
    name : Bill, 
    roles : { 
     roleKey1: true, 
     roleKey2: true, 
    }, 
    ... 
    }, 
    userKey2 : { 
    name : Steve, 
    roles : { 
     roleKey1: true, 
    }, 
    ... 
    }, 
}

在我的控制，我有以下：

export class UserComponent implements OnInit { 
    public user: Observable<any>; 
    public id: string; 

    constructor(private af: AngularFire, private activatedRoute: ActivatedRoute) { 
    } 

    public ngOnInit() { 

     const id = this.activatedRoute.params.subscribe(params => { 
     if (params['id']) { 
     this.id = params['id']; 
     console.log(params['id']); 
     } 
    }); 

    this.user = this.af.database.object('/user/' + this.id) 
    .switchMap((user) => { 
     const roleKeys = Object.keys(user.roles); 
     return Observable.forkJoin(
     roleKeys.map((roleKey) => this.af.database.object('/role/' + roleKey) 
     .first() 
     ), 
     (...roles) => { 
      roleKeys.forEach((roleKey, index) => { 
      user.roles[roleKey] = roles[index]; 
      }); 
      return user; 
     } 
    ); 
    }); 
    }

在我的模板，我有以下：

<h2>Name: {{ (user | async)?.name }} roles</h2> 

<ul *ngFor="let role of user.roles | async"> 
    <li>{{ role.name }}</li> 
</ul>

當前的結果：顯示用戶的名稱即可。沒有爲角色

預計業績：

網址爲：https://.../user/userKey1
- 比爾角色：
  - 經理
  - 設計師
網址爲：https://.../user/userKey2
- 史蒂夫角色：
  - 設計師

謝謝您的幫助！

來源

2017-02-10 Marco

是什麼'的console.log（用戶）' – sugarme

@sugarme嗨的輸出。 console.log（this.user）的輸出是FirebaseObjectObservable {_isScalar：false，$ ref：U，source：FirebaseObjectObservable，operator：SwitchMapOperator} – Marco

請在答案中查看我的解決方案。雖然有點長。創建的接口適應您的數據結構和html模板。讓我知道是否從控制檯視圖中有任何錯誤。 – sugarme

這裏是我的解決方案（未測試）：

import { Component, OnInit } from '@angular/core'; 
    import { ActivatedRoute } from '@angular/router'; 
    import { Observable } from "rxjs/Observable"; 
    import { AngularFire } from 'angularfire2'; 


    interface Role { 
     roleKey: string; 
     name: string; 
    } 

    interface User { 
     name: string; 
     roles: Array<boolean>; 
    } 

    interface Profile { 
     name: string; 
     roles: Array<Role> 
    } 

    export class UserComponent implements OnInit { 
    public user: Observable<any>; 
    public id: string; 

    constructor(private af: AngularFire, private activatedRoute: ActivatedRoute) { 
    } 

    ngOnInit() { 

     const id = this.activatedRoute.params.subscribe(params => { 
     if (params['id']) { 
      this.id = params['id']; 
      console.log(params['id']); 
      this.getProfile(this.id).then(profile =>{ 
       console.log(profile); // <--- Is it what you want? 
       this.user = Observable.of(profile); 
      }).catch(error => { console.log(error); }) ; 

     } 
     }); 
    } 

     getProfile(userKey: string): Promise<Profile> { 
      return new Promise(resolve =>{ 
       var profile: Profile; 
       this.af.database.object('/user/' + userKey).subscribe(resUser =>{ 
        if(resUser) { 
         var tempUser: User = resUser; 
         var roleKeys = []; 

         profile.name = tempUser.name; 

         roleKeys = tempUser.roles.filter(key =>{ 
          return (key == true); 
         }); 
         if(roleKeys.length > 0) { 
          var tempRoles = []; 
          var count = roleKeys.length; 
          roleKeys.forEach(roleKey =>{ 
           count = count - 1; 
           this.af.database.object('/role' + roleKey).subscribe(resRole =>{ 
            if(resRole) { 
             tempRoles.push({roleKey: resRole.name}); 
             if(count == 0) { 
              profile.roles = tempRoles; 
              resolve(profile); 
             } 
            } 
           }, (error) =>{ console.log(error); }); 
          }); 
         } else { 
          // No roles found. Display name only 
          profile.roles = []; 
          resolve(profile); 
         } 

        } 
       }, (error) => { console.log(error); }); 
      })  
     } 

    }

來源

2017-02-14 02:39:44 sugarme

謝謝@sugarme，你在回答對我幫助很大。我終於找到了一個解決方案。

export class UserComponent implements OnInit { 

    public user: Observable<any>; 
    public id: string; 

    constructor(private af: AngularFire, private activatedRoute: ActivatedRoute) { 
    } 

    public ngOnInit() { 

    this.id = this.activatedRoute.params.subscribe(params => { 
     if (params['id']) { 
     this.id = params['id']; 
     console.log(params['id']); 
     } 
    }); 

    this.user = this.af.database.object('/user/' + this.id) 
    .map(_user => { 
     const tempRoleKeys = []; 
     const tempRoleObjects = []; 
     if (_user.roles) { 
     Object.keys(_user.roles) 
     .forEach((roleKey, index) => { 
      tempRoleKeys.push(roleKey); 
      tempRoleObjects.push(this.af.database.object('/role/' + roleKey)); 
     }); 
     _user.roleKeys = tempRoleKeys; 
     _user.roleObjects = tempRoleObjects; 
     } 
     return _user; 
    }); 
    }

而對於模板

來源

2017-02-16 09:37:36 Marco

如何在angularfire2中顯示一個對象的相關對象信息

回答

相關問題