displaying a secondary child object in an array - html

Question

What I'm trying to do display some data returned from an API which is working perfectly, but the issue is there is a child object in an object which has to be displayed too and i'm finding difficulty in doing that.
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>
The data I want to access is meals which is in orders.
I've tried let child of parent.orders.meals but its not working

Answer 1

you're missing a step in your ngFors, as orders is an array and not an object:
<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>
or if you know you only want the first order ever:
<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>