Methode zum Objekt in Object Angular 2 abrufen

Question

Ich habe ein Datenmodellprojekt in Angular 2. Ich habe nur drei Klassen.

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

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

class Dish { 
    name: string; 
} 

In jeder Klasse habe ich zwei Methoden erstellt.

getName(){ return this.name } // in allen Klassen

und

getCategory() { return this.categories } // bei Menu-Klasse

getDishes() { return this.dishes } // falls der Kategorie Klasse

In meiner home.ts Komponente, Ich habe die Datenanforderung (http-Anfrage) vom Backend und ich lege alle Daten in diese Klassen. Das funktioniert OK.

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) funktioniert OK und druckt das gesamte Datenmodell korrekt.

Nun, meine Frage ist:

Wie kann ich die get-Methoden verwenden, um eine Liste in meinem home.html mit allen Daten zu machen, wie:

• 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

Das ist die Json Server-Antwort ist:

{ 
    "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" 
     } 
    } 
    } 
} 

Vielen Dank im Voraus.

Answer 1

Sie Array in verwenden Du Klasse, um es statischer zu schreiben.

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

Komponente

Sie versuchen this.menus füllen kann, die auch stark sein wird getippt Array<Menu> // der Code sicher zu kompilieren writen wird.

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

Vorlage Ordnen Sie die folgenden als eine Kombination von ungeordnete und geordnete Liste.

<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

Angulars *ngFor funktioniert nur mit iterierbaren Objekten, nicht mit Karten.

könnte so aussehen, eine Pipe mit Ihren Karten in Arrays konvertieren:

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

Und die Pipe:

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

Live-Demo: kann https://plnkr.co/edit/HzwRftZXWnDlCZWJwL0d?p=preview