отображение вторичного дочернего объекта в массиве

Question

То, что я пытаюсь сделать, отображает некоторые данные, возвращаемые из API, который работает отлично, но проблема в том, что в объекте есть дочерний объект, который тоже должен отображаться, и я испытываю трудности в этом.

DATA

[{"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, так как ордера - это массив, а не объект:

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