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方法在home.html中创建包含所有数据的列表，例如：

菜单1

＆＃34;菜单名称＆＃34;

第1类


＆＃34;类别名称＆＃34;


菜1

＆＃34;菜1＆＃34;
的名称




第2类


＆＃34;类别2的名称＆＃34;


菜1

＆＃34;菜1＆＃34;






菜单2


＆＃34;菜单2的名称

第1类

...... etc

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

获取Object Angular 2中Object的方法

2 个答案: