Firebase 对象在我的 Angular4 应用程序上排列答案

【问题标题】：Firebase Object to array on my Angular4 appFirebase 对象在我的 Angular4 应用程序上排列
【发布时间】：2018-02-09 05:30:33
【问题描述】：

我试图在我的应用程序中使用 *ngFor 循环访问我的数据库以从每个 PostId 获取数据

这就是它被推送到我的 firebase 数据库的方式

 create(post) {
    return this.db.list('/posts').push(post);
  }

这就是我从数据库中获取它的方式

 get(postId) {
    return this.db.object('/posts/' + postId);
  }

这就是它在我的 firebase 数据库中的存储方式

"posts" : {
    "-L4mKOzN9UZ3ls10ED5h" : {
      "body" : "Pureed squash and sweet potatoes are some of the handiest ingredients to have around your kitchen in the fall and winter months. .",
      "imageUrl" : "https://32lxcujgg9-flywheel.netdna-ssl.com/wp-content/uploads/2013/12/butternut-Squash-Blue-Cheese-Pizza-8.jpg",
      "name" : "tolulope",
      "title" : "Butternut Squash Pizza with Blue Cheese"
    }
  },

这就是我尝试在我的 HTML 中使用它的方式

 <div class="row" *ngFor="let post of post$ | async">
      <div class="col-lg-4 mb-4">
          <div class="view overlay hm-white-slight waves-light" mdbRippleRadius>
               <img src="{{ post.imageUrl }}" alt="First sample image">
               <a>
                <div class="mask"></div>
                    </a>
                </div>
            </div>

以下是错误信息

尝试区分“tolulope”时出错。只允许使用数组和可迭代对象

【问题讨论】：

您正在尝试迭代单个对象，而不是数组或可迭代集合
我实际上是在尝试通过 postId 获取特定数据
Posts 对象不是数组。它只是一个对象。你不能迭代一个对象。
您是否要在模板中显示所有帖子？
只是那个特定的帖子@Hareesh

标签： angular firebase firebase-realtime-database angularfire2

【解决方案1】：

查看以下代码 sn-p。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  posts = `{
    "posts": {
        "-L4mKOzN9UZ3ls10ED5h": {
            "body": "Pureed squash and sweet potatoes are some of the handiest ingredients to have around your kitchen in the fall and winter months. .",
            "imageUrl": "https://32lxcujgg9-flywheel.netdna-ssl.com/wp-content/uploads/2013/12/butternut-Squash-Blue-Cheese-Pizza-8.jpg",
            "name": "tolulope",
            "title": "Butternut Squash Pizza with Blue Cheese"
        }
    }
}`;
  objectKeys;
  ngOnInit() {

    this.objectKeys = Object.keys;
    this.posts = JSON.parse(this.posts).posts;
    console.log(this.posts);

  }



}

组件

<div class="row" *ngFor="let post of objectKeys(posts) ">
    <div class="col-lg-4 mb-4">
        <div class="view overlay hm-white-slight waves-light" mdbRippleRadius>
            <img src="{{ posts[post].imageUrl }}" alt="First sample image">
            <a>
                <div class="mask">{{posts[post].body}}</div>
            </a>
        </div>
    </div>

WORKING DEMO

【讨论】：

【解决方案2】：

试试

<ng-container *ngIf="post$ | async; let post; else othercontent">
    <div class="row" >
        <div class="col-lg-4 mb-4">
            <div class="view overlay hm-white-slight waves-light" mdbRippleRadius>
                <img src="{{ post.imageUrl }}" alt="First sample image">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
        </div>
    </div>
</ng-container>
<ng-template #othercontent>Loading Post...</ng-template>

你不能用对象做*ngFor，希望你阅读cmets。

【讨论】：