Firebase 到阵列答案

【问题标题】：Firebase to arrayFirebase 到阵列
【发布时间】：2017-09-08 09:57:06
【问题描述】：

我正在使用 Firebase 存储相同的应用程序数据，然后当我需要获取并推送到数组和迭代时工作正常，但我无法迭代图像

Firebase 数据

https://i.stack.imgur.com/iVV6M.png

这是我在 Ionic 上的代码。

this.database.list('/posts', { preserveSnapshot: true})
      .subscribe(snapshots => {
          snapshots.forEach(snapshot => {
           this.postArray.push(snapshot.val())
          });
      })

 <ion-card  *ngFor="let post of postArray" no-shadow> 

  <ion-slides>
    <ion-slide *ngFor="let image of postArray.images">
      <p>{{image}}</p>
    </ion-slide>
  </ion-slides>

    <ion-card-content>
      <ion-card-title> {{post.title}} </ion-card-title>
      <p> {{post.body}} </p>
    </ion-card-content>

谢谢

【问题讨论】：

这不是显示图像的正确方式。您的图像 wioo 是一个 url。做

标签： javascript arrays firebase ionic-framework firebase-realtime-database

【解决方案1】：

您的代码似乎有误，您正在尝试迭代 postArray 而不是 post。

<ion-slides>
  <ion-slide *ngFor="let image of post.images">
    <p>{{image}}</p>
  </ion-slide>
</ion-slides>

<ion-card-content>
  <ion-card-title> {{post.title}} </ion-card-title>
  <p> {{post.body}} </p>
</ion-card-content>

您还应该查看async 管道，您可以稍微优化您的代码 - 无需订阅。

this.postArray = this.database.list('/posts', { preserveSnapshot: true});

<ion-card  *ngFor="let post of postArray | async" no-shadow> 

    <ion-slides>
    <ion-slide *ngFor="let image of post.images">
      <p>{{image}}</p>
    </ion-slide>
  </ion-slides>

  <ion-card-content>
    <ion-card-title> {{post.title}} </ion-card-title>
    <p> {{post.body}} </p>
  </ion-card-content>

</ion-card>

最后，如果您在控制器中使用.subscribe，请不要忘记您需要取消订阅ngOnDestroy 或在您完成数据处理后。如果您不想取消订阅并且尝试保留快照，您可以查看.first 方法。

// Using .subscribe - Need to unsubscribe
this.posts$ = this.database.list('/posts', { preserveSnapshot: true })
  .subscribe

// ...

ngOnDestroy() {
  setTimeout(() => {
    this.posts$.unsubscribe();
  });
}

// Using .first - No need to unsubscribe
this.database.list('/posts', { preserveSnapshot: true})
  .first()
  .subscribe(snapshots => {

【讨论】：