获取对象角度 2 中对象的方法

Question

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

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

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

getName(){ return this.name }//在所有班级中

和

getCategory() { return this.categories }//在菜单类的情况下

getDishes() { return this.dishes }//在类别类的情况下

在我的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 方法在我的家中列出所有数据.html例如：

• 菜单 1
• "菜单名称">
• 类别 1

• "类别名称">

  • 菜 1
    • "菜名1">
• 类别 2

• "类别 2 的名称">

  • 菜 1
    • "菜名1"

• 菜单 2

• "菜单 2 的名称
  • 类别 1
  • 。等

这是 json 服务器响应：

{
"menu_1": {
"name": "Menú de día",
"cat_1": {
"name": "Entrantes",
"dish_1": {
"Name": "Ensalada Romana"
},
"dish_2": {
"Name": "Sopa de galets"
}
},
"cat_2": {
"name": "Segundos",
"dish_1": {
"Name": "Calamares a la romana"
},
"dish_2": {
"Name": "Tortilla de patatas"
}
}
},
"menu_2": {
"name": "Menú Principal",
"cat_1": {
"name": "Primer Plato",
"dish_1": {
"Name": "Ensalada Romana"
},
"dish_2": {
"Name": "Sopa de galets"
}
},
"cat_2": {
"name": "Segundo Plato",
"dish_1": {
"Name": "Calamares a la romana"
},
"dish_2": {
"Name": "Tortilla de patatas"
}
},
"cat_3": {
"name": "Postres",
"dish_1": {
"Name": "Crema Catalana"
}
}
}
}

提前谢谢。

Answer 1

您可以在类中使用 Array，以使其更加静态类型化。

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;
}

元件

您可以尝试填充this.menus这也将被强类型化Array<Menu>确保编写代码进行编译。

getMenus() {
this.globals.getMenus().subscribe(
data => {
this.menus = new Array<Menu>();
Object.keys(data).forEach(name => {
//Initialize and push items as per data structure. 
this.menus.push(new Menu(data[name]));
});
console.log(this.menus);
},
err => { console.log(err) }
);
}

模板将以下内容排列为无序列表和有序列表的组合。

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

Answer 2

Angular的*ngFor只能处理可迭代对象，而不适用于地图。

可能看起来像这样，使用Pipe将地图转换为数组：

<ul>
<li *ngFor="let m of menus | mapToArray">
{{ m.name }}
<ul>
<li *ngFor="let c of m.categories | mapToArray">
{{ c.name }}
<ul>
<li *ngFor="let d of c.dishes | mapToArray">
{{ d.name }}
</li>
</ul>
</li>
</ul>
</li>
</ul>

和Pipe：

@Pipe({
name: 'mapToArray'
})
export class MapToArrayPipe {
public transform(map: any): any[] {
if (!map) return [];
return Object.keys(map).map(k => map[k]);
}
}

现场演示：https://plnkr.co/edit/HzwRftZXWnDlCZWJwL0d?p=preview