在Object Angular 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 } // 如果是 Menu 类

getDishes() { return this.dishes } // 如果是 Category 类

在我的 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 方法在 home.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