mat-expansion-panel 主体不适用于 ngFor答案

【问题标题】：mat-expansion-panel body won't work with ngFormat-expansion-panel 主体不适用于 ngFor
【发布时间】：2019-12-26 16:15:22
【问题描述】：

我正在尝试实现一个 mat-accordion，其中 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>

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

这是重新创建的问题。

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

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

【问题讨论】：

标签： angular angular-material frontend

【解决方案1】：

我认为这对你有帮助，

*ngFor="let name of days.subDay"

【讨论】：

【解决方案2】：

您的代码是正确的，问题是您的内部 *ngFor 应该是以下而不是 day.daily_division 因为您的 day 对象中的数组名称是 subDay 而不是 daily_division。

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

Demo

【讨论】：