Angular 获取方法以在对象2中创建对象

我在Angular 2中有一个数据模型项目。我只有三节课

class Menu {
  name: string;
  categories: { [name: string]: Category };
}

class Category {
  name: string;
  dishes: { [name: string]: Dish };
}

class Dish {
  name: string;
}

在每个类中，我都创建了两个方法

getName（）{返回this.name}

//在所有类中

及

getCategory（）{返回this.categories}

//如果是菜单类

getDistrips（）{返回this.distrips}

//如果是类别类

在my home.ts组件中，我有来自后端的数据请求（http请求），我将所有数据放在这些类中。这工作正常

  getMenus() {
    this.globals.getMenus().subscribe(
      data => {
        this.menus = {};
        Object.keys(data).forEach(name => {
          this.menus[name] = new Menu(data[name]);
        });

        console.log(this.menus);
      },
      err => { console.log(err) }
    );
  }

console.log（this.menus）工作正常并正确打印所有数据模型

现在，我的问题是：

如何使用get方法在my home.html中列出所有数据，如：

• 菜单1
• “菜单名”
• 第一类
• “类别名称”
  • 菜1
    • “菜名1”
• 第2类
• “类别2的名称”
  • 菜1
    • “菜名1”
• 菜单2

• “菜单2的名称
  • 第一类
  • …等等

这就是Json服务器响应：

{
“菜单1”：{
“姓名”：“Menúde día”，
“第一类”：{
“姓名”：“参赛者”，
“第1道菜”：{
“名称”：“Ensalada Romana”
},
“第二道菜”：{
“名称”：“Sopa de galets”
}
},
“第2类”：{
“名称”：“Segundos”，
“第1道菜”：{
“名称”：“卡拉马拉罗马纳”
},
“第二道菜”：{
“名称”：“玉米饼”
}
}
},
“菜单2”：{
“姓名”：“MenúPrincipal”，
“第一类”：{
“名字”：“柏拉图入门”，
“第1道菜”：{
“名称”：“Ensalada Romana”
},
“第二道菜”：{
“名称”：“Sopa de galets”
}
},
“第2类”：{
“姓名”：“塞贡多·柏拉图”，
“第1道菜”：{
“名称”：“卡拉马拉罗马纳”
},
“第二道菜”：{
“名称”：“玉米饼”
}
},
“第三类”：{
“名称”：“Postres”，
“第1道菜”：{
“名称”：“克里玛加泰罗尼亚”
}
}
}
}

---

提前感谢。

Angular的

*ngFor

仅适用于可编辑对象，而不适用于地图

可以如下所示，使用

管道

将地图转换为数组：

{{m.name}}


{{c.name}}


{{d.name}

和

管道

：

@管道({
名称：“mapToArray”
})
导出类MapToArraype{
公共转换（映射：任意）：任意[]{
如果（！map）返回[]；
返回Object.keys（map.map）（k=>map[k]）；
}
}

---

实时演示：

您可以在类中使用数组，使其更具静态类型

class Menu {
  name: string;
  categories: Array<Category>; // initialize it as applicable
}
class Category {
  name: string;
  dishes: Array<Dish>;// initialize it as applicable
}
class Dish {
  name: string;
}

模板 将以下内容排列为未排序列表和已排序列表的组合

<ul>
    <li *ngFor="let menu of menus">
        {{ menu.name }}
        <ul>
            <li *ngFor="let category of menu.categories">
                {{ category.name }}
                <ul>
                    <li *ngFor="let dish of category.dishes">
                        {{ dish.name }}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

{{menu.name}


{{category.name}


{{dish.name}

看起来不错，但给我带来了一个错误：./HomePage类HomePage中的错误-原因：找不到不同的支持对象“[object object]'of type'object'。NgFor只支持绑定到诸如数组之类的Iterables。我明白了，您的

菜单不是数组，而是对象。。最好的方法是将其更改为菜单数组而不是菜单映射。：）谢谢您的回答，但如果我这样做，使用存储在Angular 2中的类中的数据创建数据模型有什么意义（即使我这样做，它也会给我一个错误，因为菜单中有对象类型类别。请为您的问题添加一个完整的JSON响应。然后我将创建一个plunker！）当然，您可以创建数据模型！这很好。但是
*ngFor
只适用于可编辑的对象。否则，您可以使用
管道
将地图转换为数组。如果您可以添加json服务器响应，我将提供一个插件。：）@Javier如果你觉得这应该是答案，接受它以便其他人可以使用，如果没有，并且你在这里做了一些更好的事情，这是一个很好的社区贡献：）Done@Ankesh；）
<ul>
    <li *ngFor="let menu of menus">
        {{ menu.name }}
        <ul>
            <li *ngFor="let category of menu.categories">
                {{ category.name }}
                <ul>
                    <li *ngFor="let dish of category.dishes">
                        {{ dish.name }}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>