错误类型错误：无法读取未定义的 Angular Firebase 的属性“标题”答案

【问题标题】：ERROR TypeError: Cannot read property 'title' of undefined Angular Firebase错误类型错误：无法读取未定义的 Angular Firebase 的属性“标题”
【发布时间】：2020-10-18 06:50:10
【问题描述】：

我正在尝试从 HTML 角度组件上的 firebase DB 获取产品标题。日期和运输名称工作正常，但产品标题在控制台上生成错误。

    <div class="row">
    <div class="col-md-8 col-sm-12">
      <ng-container *ngIf="orders$ | async as order">
        <ng-container *ngIf="order.payload.val().items" ; else notFound>
          <div class="card">
            <div class="card-body">
              <h4 class="card-title text-center">Order Details</h4>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">
                  <span class="font-weight-bold">Customer Name:</span> {{order.payload.val().shipping.name}}
                </li>
                <li class="list-group-item">
                  <span class="font-weight-bold">Order Date:</span> {{order.payload.val().datePlaced | date}}
                </li>

                <li  class="list-group-item">
                    <span class="font-weight-bold">Order Title:</span> {{order.payload.val().items.product.title}}
                  </li>
              </ul>
            </div>
          </div>
        </ng-container> 
    </ng-container>
   </div>
</div>

Firebase DB Image

【问题讨论】：

您能否将您的订单对象的内容添加到您的问题中。
我只想知道获取产品标题的正确代码，请检查给定图像中的 firebase db 树结构。日期和运输名称正在显示，但产品标题没有显示。跨度>

标签： angular typescript firebase firebase-realtime-database

【解决方案1】：

看起来您的项目是一个数组，因此您必须使用以下内容来获取项目的标题。 (项目[0])

<li  class="list-group-item">
    <span class="font-weight-bold">Order Title:</span> {{order.payload.val().items[0].product.title}}
</li>

如果要显示所有项目，可以使用 *ngFor 指令

<li  *ngFor="let item of order.payload.val().items; let i = index"  class="list-group-item">
    <span class="font-weight-bold">Order Title:</span> {{item.product.title}}
</li>

【讨论】：

它可以工作，但是如果项目有超过 1 个数组，那么其他项目呢？我想在订单详情中显示所有可用的商品数据。