如何使用 ngfor 迭代对象

Question

鉴于这组数据，我希望在我的 html 中迭代它们。为了实现这一点，我尝试了嵌套的ngfor，但没有成功。

我尝试使用嵌套的 ngfor 迭代对象两次，但出现此错误

HabitRecordsComponent.html:8 ERROR 错误：找不到不同的 支持“对象”类型的对象“[对象对象]”。仅适用于 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>

这是我在组件上的 ts

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

我们需要查看您的组件的代码。您的组件需要一个名为“formattedHabits”的公共变量，它应该是代表您描述的数据结构的某种对象的数组。

如果您想在问题中使用 json，您可能需要创建任何类型的公共变量“formattedHabits”并使用 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>

这个循环会失败。但是，在您的问题中，您会遍历一个不是集合的对象。

看看我的代码，这将运行一个嵌套循环并显示每个习惯的描述。

作为奖励，您正在编写打字稿。当不将所有变量声明为任何变量时，您会受益于它的功能，而是将它们分配为实际类型。

Answer 2

ngFor 只能迭代 'iterables'，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"
        }
      ]
    }
  ]
}