检索firebase数据库json

Question

我正在尝试检索 firebase 数据库中的所有数据。当我使用此代码<h1>{{ item | async | json }}</h1> 取决于 angularfire2 对象的文档时，我在 html 中得到了 json 响应对象的列表

{
  "type": "value",
  "payload": {
    "8D3sENaBcLaXoGNnh1MPuoyj5LP2": {
      "-LWl294Hs6YjkvJE5pqi": {
        "name": "ddd",
        "title": "dd"
      },
      "-LWlEonKLWfOttzirqp7": {
        "name": "sas",
        "title": "ass"
      },
      "-LWlGvn81Kes2A-1UcC2": {
        "name": "asa",
        "title": "asass"
      },
      "-LWlK92A7gaRkKVrZSFU": {
        "name": "ddd",
        "title": "ddd"
      },
      "-LWla1PYxsIFKhaCXvtu": {
        "name": "ff",
        "title": "fdsf"
      },
      "-LWpfRJP8VdwG927wyXS": {
        "name": "ali",
        "title": "ali"
      },
      "-LWph3ei12KTNyirdnZb": {
        "name": "ddddd",
        "title": "daD"
      }
    },
    "WUM2HBkGo8TFDeOjEqO1s3lCj1p1": {
      "-LWlHlhyS9m3ECS3wIdk": {
        "name": "qwqsasasa",
        "title": "as"
      },
      "-LWlHmXZAJdSPZurO7ii": {
        "name": "qwqsasasa",
        "title": "as"
      },
      "-LWph-fv4JMtTk22aE5X": {
        "name": "sssssssssssssssssssssssss",
        "title": "sssssssssssssssssssssssss"
      }
    }
  },
  "key": "report"
}

我只想从此列表中获取 json 对象 title 和 name 。我使用了这段代码，但我在 html 中得到了空白页面，没有数据可以显示！

  <h1>{{ (item | async)?.name }}</h1>
  <h1>{{ (item | async)?.title }}</h1>

主要代码

  itemRef: AngularFireObject<any>;
  item: Observable<any>;

      ionViewWillLoad(){
        this.fire.authState.subscribe(data => {
          if(data && data.email && data.uid){
            this.toastCtrl.create({
              message : ` welcome ${data.email}`,
              duration:2000
            }).present()

            this.itemRef = this.db.object('report');
            this.item = this.itemRef.snapshotChanges();

          }

        })

      }

Answer 1

您数据库中的/report 键似乎包含一个对象列表：特别是每个用户的报告列表，因此在/report 下有两个嵌套键。但是您的代码将其作为单个对象加载。这会导致这个 HTML <h1>{{ (item | async)?.name }}</h1> 本质上显示 /report/name，而您的数据库中并不存在。

如果您想显示单个报告的名称和标题，您需要知道该报告的键。例如为第一个用户显示第一个报告：

this.itemRef = this.db.object('report/8D3sENaBcLaXoGNnh1MPuoyj5LP2/-LWl294Hs6YjkvJE5pqi');

这里的第一个子键 8D3sENaBcLaXoGNnh1MPuoyj5LP2 是您要显示其报告的用户的 UID，-LWl294Hs6YjkvJE5pqi 是该用户的第一个报告。

如果您想显示一个用户的所有报告，您将需要再次知道该用户的密钥并将其传递到数据库中。但是由于您随后会返回报告列表，因此您还需要使用 AngularFire 中的 list 服务并在 HTML 模板中循环遍历结果，以便为每个报告生成元素：

this.reports = this.db.list('report/8D3sENaBcLaXoGNnh1MPuoyj5LP2');

还有：

<ul>
  <li *ngFor="let report of reports | async">
     {{ item.title }} - {{ item.name }}
  </li>
</ul>

如果您想显示所有用户的所有报告的嵌套列表，您可以从上面的相同开始，但现在加载所有用户的数据，并使用另一个 @987654333 @ 先遍历用户。

另见：

• AngularFire documentation on lists
• 这个tutorial on building a CRUD application with AngularFire