When using *ngFor to iterate through data, everything appears to be working fine until attempting to access nested data within an object inside another object.
For example:
{
"tvshow": [
{
"id": "value",
"time": {
"clock": "value",
"material": {
"type": "value"
}
}
}
]
}
<div *ngFor="let tvshow of tvshow">
{{tvshow.id}}
{{tvshow.time.clock}} - Works
{{tvshow.time.material}} - prints out [object Object] as it should
{{tvshow.time.material.type}} - Does not work. And breaks the whole page. Makes no sense.
</div>
Has anyone else encountered this issue before? It's quite confusing to me.