Angular 错误类型错误：无法读取属性'；标题'；未定义的角火基

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

    <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>

订单详情


客户名称：{{order.payload.val（）.shipping.Name}


订单日期：{Order.payload.val（）.datePlaced | Date}


订单标题：{{Order.payload.val（）.items.product.Title}

---

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

订单标题：{{Order.payload.val（）.items[0].product.Title}

如果要显示所有项目，可以使用*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> 

订单标题：{{item.product.Title}

请将订单对象的内容添加到您的问题中。我只想知道获取产品标题的正确代码。请检查给定图像中的firebase db树结构。显示日期和发货名称，但产品标题不显示。它可以工作，但对于其他项目，例如如果项目具有多个数组，该怎么办？我想在订单详细信息中显示所有可用项目数据。

<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>