显示来自 Firebase DB 的用户数据

Question

我正在尝试将 firebase 用户中的两个集合与它们的唯一用户 ID 匹配，并显示每个集合中的数据（如果它们存在于该集合中）。总共有 6 个不同的集合，我需要检查这些用户是否存在，如果存在，我将需要显示他们的所有信息。这是我的数据库的一些打印屏幕：

我已经更改了它，所以他们的所有详细信息现在都位于同一个集合中

所以我尝试了一些方法来尝试做到这一点。第一件事是，我没有将数据传递到不同的集合，而是尝试将所有数据都放在一次集合中，然后从那里获取信息，但我无法弄清楚如何为每个用户显示这些详细信息。我想我需要将它传递到一个数组中，但不完全确定如何去做，也无法在互联网上找到任何东西来尝试解决这个问题。我能够 console.log 所有用户详细信息，并且我能够从与用户 UID 匹配的 firebase 中成功获取这些详细信息，但不完全确定如何显示该数据。

这是我的代码：这就是我从 firebase 获取数据的方式，我只需要知道如何显示该集合中的所有用户及其匹配数据。

ionViewDidLoad() {
    this.afAuth.authState.take(1).subscribe(data=>{
      var ref = firebase.database().ref().child(`users/${data.uid}`);
      if(ref != null){
        ref.on("value", function(snapshot) {

          console.log(snapshot.val());
        }, function (errorObject) {
          console.log("The read failed: " + errorObject.code);
        });

      }
      else(err)=>{
        console.log(err);
      }


    }
    )

这是我的一些 HTML

<ion-item-sliding *ngFor="let key of filteredusers">
      <ion-item >
        <ion-avatar item-left>
          <img src="{{key.photoURL}}">
        </ion-avatar>
        <h2>{{key.displayName}}</h2> 
        <p>s</p> 
      </ion-item>

我能够获得他们的显示名称和个人资料图片，但因为我一开始是按照教程学习的，所以这就是为什么我可以获得用户显示名称和照片的原因 URL 但我不确定关于如何获取其余数据。我对 Ionic 比较陌生，所以任何帮助将不胜感激。

我试过添加这样的东西，但还是不行。

<h3>{{key.weight}}</
<h3>{{key.age}}</h3>

我从 firebase 获取数据的方式是这样的。

firedata = firebase.database().ref('/users');


  getallusers() {
    var promise = new Promise((resolve, reject) => {
      this.firedata.orderByChild('uid').once('value', (snapshot) => {
        let userdata = snapshot.val();
        let temparr = [];
        for (var key in userdata) {
          temparr.push(userdata[key]);
        }
        resolve(temparr);
      }).catch((err) => {
        reject(err);
      })
    })
    return promise;
  }

Answer 1

所以我想出了如何为用户显示体重和其他细节。我只是在 firebase 的同一个集合中传递了详细信息，而不是将其放在不同的集合中。然后我只是在 HTML.

中调用了该数据

 <ion-card-content> 
    <ion-item-sliding *ngFor="let key of filteredusers">
      <ion-item >
        <ion-avatar item-left>
          <img src="{{key.photoURL}}">
        </ion-avatar>
        <h2>{{key.displayName}}</h2> 
          <h3>{{key.weight}}</h3>
      </ion-item>

所以我添加了 {{key.weight}} 因为现在它们在同一个集合中我可以在 HTML.

中调用该数据

显示来自 Firebase DB 的用户数据

Displaying user data from Firebase DB

firebase

firebase-realtime-database

angularfire2

ionic3

angular