使用 Ionic 从 firebase 获取对象数据答案

【问题标题】：Get object data from firebase using Ionic使用 Ionic 从 firebase 获取对象数据
【发布时间】：2020-03-19 01:48:58
【问题描述】：

我将尽可能清楚地解释这一点，因为英语不是我的主要语言：我正在尝试获取此对象数据，该数据存储在用户文档中名为“订单”的字段中，基本上每个我通过购物车下的订单，它会在用户文档中创建一个新订单。

样本数据：

我可以使用以下代码访问 pickuptime、location 和 total 字段，因为它们不在购物车对象内：

constructor(private aF: AngularFirestore, private aS: AuthService) {
  const ordenes = aF.doc(`users/${this.aS.getInfo()}`);
  this.userOrders = ordenes.valueChanges();
}

getInfo() 方法只是获取当前用户的 uid。

现在，当我尝试显示从文档中获取的数据时，我只是显示了购物车对象数组之外的字段。

这是我显示数据的代码：

<ion-list>
    <ion-card *ngFor="let p of ((userOrders | async)?.ordenes)">
        <ion-card-header>
            <ion-card-title>{{ p.name }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            <img src={{p.img}}>
            <br>
            <ion-card-subtitle>{{p.desc}}</ion-card-subtitle>
            <ion-row class="ion-align-items-center">
                <ion-col size="4">
                    <ion-label color="secondary">
                        <b>Total: {{ p.total}}</b>
                    </ion-label>
                </ion-col>
                <ion-col size="8" class="ion-text-right">
                    <b>Recoger en sucursal: {{p.sucursal}}</b>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col>
                    <b>Hora: {{p.horarecoger}}</b>
                </ion-col>
            </ion-row>
        </ion-card-content>
    </ion-card>
</ion-list>

任何帮助将不胜感激！

【问题讨论】：

标签： angular firebase ionic-framework google-cloud-firestore angularfire2

【解决方案1】：

您的问题有点不清楚，但我想您是在问如何访问模板中的 cart 元素。

在您的数据库示例中，尽管没有展开，cart 似乎是一个地图数组。因此，像 p.img 这样的元素不会引用任何东西，因为 orders 数组本身没有 img 成员。

但这不是微不足道的，因为cart 是一个数组。因此，您需要另一个 *ngFor 来枚举该数组的元素。

我将使用一个非常简单的 html 模板来说明您需要做什么，但这应该允许您在完整的 ionic 模板中执行类似的操作（因为您可以更轻松地重新设计模板比我尝试这样做:)。给你：

<div *ngFor="let p of ((userOrders | async)?.ordenes)">
  <ul>
    <li>Order Total: {{ p.total }}</li>
    <ul *ngIf="p.cart?.length > 0">
      <li *ngFor="let c of p.cart">Item: {{ c.amount }} - {{ c.desc }}</li>
    </ul>
  </ul>
</div>

您还提到了 img 成员和类似字段 - 但您也无法访问它，因为外部循环已经只在 order 数组上循环，而 img 在外部对象上.这仍然相当容易处理，您只需要直接访问它而不是使用循环。比如：

<div *ngIf="(userOrders | async) as user">
  <img src="{{ user.img }}">
</div>

【讨论】：