Javascript 如何使用ngfor迭代对象

给定这组数据，我希望在html中迭代它们。为了实现这一点，我尝试了嵌套的

ngfor

，但没有成功

我试图用嵌套的

ngfor

对对象进行两次迭代，但我得到了这个错误

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

---

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

如果您想使用问题中的json，您可能需要创建一个类型为any的公共变量'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>

{{习惯.描述}

这个循环将失败。然而，在你的问题中，你循环通过一个不是集合的对象

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

---

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

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"
        }
      ]
    }
  ]
}

---

请解释为什么它应该是一个数组。显然OP不知道ngFor迭代数组。

{ "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"
        }
      ]
    }
  ]
}