mat-expansion-panel body won't work with ngFor

Question

I am trying to implement a mat-accordion, where the mat-expansion-panels body show the information of an array. The array has no fixed length, so I try to add content to the body with *ngFor. But the body stays empty.

I checked if the for-loop accesses the object correctly, which it does, and adding multiple paragraphs to the expansion-panel also works. I don't know if it is simply not supported to add content with ngFor inside a mat-expansion-panel.

html

<mat-accordion>
  <mat-expansion-panel *ngFor="let day of days">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{day.date}}
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>Works without *ngFor</p>
    <p>Multiple work aswell</p>
    <p *ngFor="let subDay of day.subDay" class="grid5">
      {{subDay.name}}
    </p>
    </mat-expansion-panel>
</mat-accordion>

ts

days = [
    {
      date: "Mon 01", 
      subDay: [
        {
          name: "morning"
        }, 
        {
          name:"afternoon"
        },
        {
          name: "evening"
        },
        {
          name: "night"
        }
      ]
    }
 ]

Here is the issue recreated.

https://stackblitz.com/edit/angular-fgo3zv

I expect the expansion-panel to also have "morning", "afternoon", "evening" and "night" when expanding the panel.

Answer 1

I think this is helpful for you,

*ngFor="let name of days.subDay"

{{name.name}}

Answer 2

You code is correct, the problem is that your inner *ngFor should be the following instead of day.daily_division as the name of your array inside your day object is subDay not daily_division.

<p *ngFor="let subDay of day.subDay" class="grid5">
  {{subDay.name}}
</p>

Demo