獲取對象角度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的一個列表的所有數據，如：

• 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> //確保代碼writen編譯。

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