Как использовать ngfor для итерации объектов

Question

Учитывая этот набор данных, я хочу перебрать их в моем HTML. Чтобы добиться этого, я попытался использовать вложенный ngfor, но безуспешно.

Я пытался дважды повторить объект с вложенным ngfor, но я получаю эту ошибку

HabitRecordsComponent.html: 8 Ошибка: ошибка: не удается найти разницу вспомогательный объект «[объект]] типа« объект ». Только для Ng поддерживает привязку к Iterables, таким как массивы.

Вот объект.

{
  "Sat Jan 05 2019": [
    {
      "completed": true,
      "frequency": [
        7,
        6,
        2,
        1
      ],
      "description": "Walk 100km",
      "color": "#E97825",
      "task_id": "00397030-182d-11e9-957b-79c872c75fe1"
    },
    {
      "completed": true,
      "frequency": [
        7,
        6,
        5,
        4,
        3,
        2,
        1
      ],
      "description": "Study 2",
      "color": "#F4ED59",
      "task_id": "31151be0-182e-11e9-957b-79c872c75fe1"
    },
    {
      "completed": true,
      "frequency": [
        7,
        6,
        5,
        4
      ],
      "description": "Home drinking food2",
      "color": "#00A651",
      "task_id": "9825ea00-182c-11e9-957b-79c872c75fe1"
    }
  ],
  "Mon Jan 07 2019": [
    {
      "completed": true,
      "frequency": [
        7,
        6,
        2,
        1
      ],
      "description": "Walk 100km",
      "color": "#E97825",
      "task_id": "00397030-182d-11e9-957b-79c872c75fe1"
    },
    {
      "completed": false,
      "frequency": [
        5,
        4,
        3,
        1
      ],
      "description": "Drink 4lt Water",
      "color": "#ED1E24",
      "task_id": "250350c0-182d-11e9-957b-79c872c75fe1"
    },
    {
      "completed": true,
      "frequency": [
        7,
        6,
        5,
        4,
        3,
        2,
        1
      ],
      "description": "Study 2",
      "color": "#F4ED59",
      "task_id": "31151be0-182e-11e9-957b-79c872c75fe1"
    },
    {
      "completed": true,
      "frequency": [
        7,
        4,
        3,
        2,
        1
      ],
      "description": "New habit 4",
      "color": "#912AD6",
      "task_id": "ab378180-182c-11e9-957b-79c872c75fe1"
    }
  ],

Вот мой HTML-код

<div class="records-calendar">
    <div class="records-container" *ngFor="let formattedHabit of formattedHabits"></div>
    <div class="" *ngFor="let habit of formattedHabit"></div>
</div>

Вот мой тс на компоненте

import { Component, OnInit, Input, } from '@angular/core';
import { ChangeDetectorRef } from '@angular/core';
import * as moment from 'moment';


@Component({
  selector: 'app-habit-records',
  templateUrl: './habit-records.component.html',
  styleUrls: ['./habit-records.component.css']
})
export class HabitRecordsComponent{
  @Input()
  habitsComplete:any;
  formattedHabits:any;





  constructor(private cdRef:ChangeDetectorRef) { }

  ngAfterViewChecked(): void {
      this.formattedHabits = this.habitsComplete.map(item => ({
        activities: item.completed.map(activity => ({
          [activity.Completed_at]:{
            completed: activity.Completed,
            frequency: item.Frequency.values,
            description: item.Description,
            color: item.Color,
            task_id:item.Task_id,
          }
          })),
      }))
       this.formattedHabits = this.formattedHabits.reduce((r, { activities }) => {
        activities.forEach(o => Object
            .entries(o)
            .forEach(([k, v]) => (r[k] = r[k] || []).push(v))
        );
        return r;
    }, {});

Answer 1

ngFor может перебирать только итерации, formattedHabits в настоящее время не повторяется.Вы можете изменить его на массив (итеративный), например:

{ "dateHabits": [   
    {
      "date": "Sat Jan 05 2019",
      "habits": [
        {
          "completed": true,
          "frequency": [
            7,
            6,
            2,
            1
          ],
          "description": "Walk 100km",
          "color": "#E97825",
          "task_id": "00397030-182d-11e9-957b-79c872c75fe1"
        }
      ]
    }
  ]
}

Answer 2

Нам нужно увидеть код вашего компонента. Для вашего компонента требуется открытая переменная с именем 'formattedHabits', которая должна быть массивом какого-либо объекта, представляющего структуру данных, которую вы описали.

Если вы хотите использовать json, как в вашем вопросе, вы можете создать публичную переменную 'formattedHabits' типа any и использовать JSON.Parse для преобразования объекта json в объект javascript.

const formattedHabits: any = JSON.Parse('your json');

Тогда о вашем вложенном цикле, вам нужно также вложить div.

<div class="records-container" *ngFor="let formattedHabit of formattedHabits">
    <div class="" *ngFor="let habit of formattedHabit.habits">{{habit.description}}</div>
</div>

Эта петля потерпит неудачу. Однако в вашем вопросе вы просматриваете объект, который не является коллекцией.

Посмотрите на мой код, он запустит вложенный цикл и отобразит описание каждой отдельной привычки.

И в качестве бонуса вы пишете машинопись. Вы получаете выгоду от его возможностей, когда не объявляете все переменные как какие-либо, а присваиваете им фактический тип.