Блог

Я пытаюсь напечатать дни из массива, структура которого выглядит следующим образом.

 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

Вы можете использовать KeyValuePipe Angular для перебора объекта и печати задач:

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