垫展开面板主体无法与ngFor一起使用

时间:2019-08-21 11:33:41

标签: angular angular-material frontend

我正在尝试实现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

我希望扩展面板在扩展面板时也会有“早上”,“下午”,“晚上”和“夜晚”。

2 个答案:

答案 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>

Demo