Question

我正在尝试显示一些从API返回的数据，这些API正常运行，但是问题是在对象中也有一个子对象，该对象也必须显示，而我发现这样做很困难。

数据

[{"id":5,"referenceId":1189,"firstName":"Dan","lastName":"Daniels","orders":[{"id":109,"meals":[{"id":47,"name":"Fried Rice","description":"This is a  very sweet meal","image":"","mealType":"LUNCH","unitPrice":-20,"status":"ENABLED"}],"serveDate":"2019-07-11 00:00:00"}]}]

HTML

          <tbody>
            <tr *ngFor="let parent of todayOrder" class="table-row" #row>
              <td>
                {{parent.firstName}} {{parent.lastName}}
              </td>
              <td>
                <span *ngFor="let child of parent.orders.meals"> {{child.name}}. </span>
              </td>
            </tr>
          </tbody>

我要访问的数据是meals中的orders。我已经尝试过let child of parent.orders.meals，但无法正常工作

Answer 1

您缺少ngFors的步骤，因为orders是数组而不是对象：

      <tbody>
        <tr *ngFor="let parent of todayOrder" class="table-row" #row>
          <td>
            {{parent.firstName}} {{parent.lastName}}
          </td>
          <td>
            <ng-container *ngFor="let order of parent.orders">
              <span *ngFor="let child of orders.meals"> {{child.name}}. </span>
            </ng-container>
          </td>
        </tr>
      </tbody>

或者如果您只知道有史以来的第一笔订单：

      <tbody>
        <tr *ngFor="let parent of todayOrder" class="table-row" #row>
          <td>
            {{parent.firstName}} {{parent.lastName}}
          </td>
          <td>
            <span *ngFor="let child of parent.orders[0].meals"> {{child.name}}. </span>
          </td>
        </tr>
      </tbody>

在数组中显示辅助子对象

1 个答案: