Question

鉴于这组数据，我希望在html中对其进行迭代。为此，我尝试了嵌套ngfor，但未成功。

我试图用嵌套的ngfor将对象重复两次，但出现此错误

HabitRecordsComponent.html：8错误错误：找不到其他内容类型为“对象”的支持对象“ [对象对象]”。仅NgFor 支持绑定到数组等Iterable。

这里是对象。

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

我们需要查看您组件的代码。您的组件需要一个名为“ 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>

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

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

此外，您正在写打字稿。当不将所有变量都声明为任何变量，而是将它们分配为实际类型时，您会从中受益。

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

如何使用ngfor迭代对象

2 个答案: