如何动态创建日期列表

Question

我正在尝试从结构如下所示的数组中打印日期。

form:[
    {
      SUN:{
        name:'sunday',
        task:[]
      }
    },
    {
      MON:{
        name:'monday',
        task:[]
      }
    }
  ]

通过使用上面的数组，我想动态创建一个表单，其中包含日期名称及其任务；

我已经尝试过以下代码片段。

<div *ngFor="let item of workingHourForm;let i =index">

  {{item.SUN.name}} // dynamically change SUN --> MON .....
</div>

但它只显示了 1 个结果。

预期输出：

星期日：任务 1 任务 2
星期一：任务 1 任务 2

看看：https://stackblitz.com/edit/angular-ivy-cereff?file=src/app/app.component.html

Answer 1

您可以使用 Angular 的 KeyValuePipe 迭代对象并打印任务：

<div *ngFor="let item of workingHourForm">
  <div *ngFor="let x of item | keyvalue">
    {{ x.key }}: <span class="task" *ngFor="let task of x.value.tasks">{{task}}</span>
  </div>
</div>

如何动态创建日期列表

How to dynamically create list of days

angular

ngfor