Angular 15: solution with ngFor rendering nested objects in a template with async pipe
I've searched everywhere and can't find a clear answer. I'm working with an scenario with rendering nested objects in my Angular 15 application using the `async` pipe. I have a service that returns an observable of an array of objects, each containing another array. My component fetches this data, and while I'm able to correctly loop through the outer array, the nested array doesn't render as expected in the template. I've tried using the `async` pipe directly in the `ngFor` for the nested array, but it results in an behavior. Here’s a simplified version of my code: ```typescript // my.component.ts import { Component, OnInit } from '@angular/core'; import { MyService } from './my.service'; @Component({ selector: 'app-my-component', templateUrl: './my.component.html', }) export class MyComponent implements OnInit { data$ = this.myService.getData(); constructor(private myService: MyService) {} ngOnInit() {} } ``` The template looks like this: ```html <!-- my.component.html --> <div *ngFor="let item of data$ | async"> <h3>{{ item.title }}</h3> <ul *ngFor="let subItem of item.subItems"> <li>{{ subItem.name }}</li> </ul> </div> ``` When I run this, I get an behavior saying `want to read properties of undefined (reading 'subItems')`. I've confirmed that `item.subItems` is defined and has data when I log it in the console. I've tried adding safe navigation operators (`?.`) but that doesn't resolve the scenario either. I also verified that `subItems` is indeed an array. Any insights on how to properly handle this scenario with the `async` pipe and nested data structures would be greatly appreciated! For context: I'm using Typescript on Windows.