Получить метод Object в 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 } // в случае класса меню

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 со всеми данными, например:

• Menu 1
• "name of menu"
• Category 1

• "name of category"

  • Dish 1
    • "name of dish 1"
• Category 2

• "name of category 2"

  • Dish 1
    • "name of dish 1"

• Menu 2

• "name of menu 2
  • Category 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

Вы можете использовать массив в вы класс, чтобы сделать его более статически типизированным.

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's *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