我正在尝试实现mat手风琴,其中mat-expansion-panels主体显示数组的信息。该数组没有固定长度,因此我尝试使用* ngFor将内容添加到正文中。但是身体仍然是空的。
我检查了for循环是否正确访问了该对象,并且这样做了,并且向扩展面板添加了多个段落也可行。 我不知道是否不支持在mat-expansion-panel内使用ngFor添加内容。
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"
}
]
}
]
这是重新创建的问题。
https://stackblitz.com/edit/angular-fgo3zv
我希望扩展面板在扩展面板时也会有“早上”,“下午”,“晚上”和“夜晚”。
答案 0 :(得分:3)
我认为这对您有帮助,
* ngFor =“让名称为days.subDay”
{{name.name}}
答案 1 :(得分:0)
您的代码是正确的,问题在于您内部的* ngFor应该是以下内容而不是day.daily_division,因为您天对象内的数组名称是subDay而不是daily_division。
<p *ngFor="let subDay of day.subDay" class="grid5">
{{subDay.name}}
</p>