Wie erklärt man das Untermenü innerhalb des Klassenmodells?

Question

Ich bin neu bei angular2. Also, bitte ertrage mich.

Was ich versucht habe, so weit:

export class Navbar { 
    name: string; 
    submenu: { 
    name: string; 
    } 
} 

Nochmal: Ich habe versucht, Array und []

export class Navbar { 
    name: string; 
    submenu: array; 
} 

Dies ist der Code ohne Untermenü Erklärung.

export class Navbar { 
    name: string; 
} 

const NAVBAR: Navbar[] = [ 
    { name: 'Company Data' }, 
    { name: 'Client Data', 
    submenu: [ 
     { name: 'Balance' }, 
     { name: 'Settlement' } 
    ] 
    }, 
    { name: 'Bookie Data' }, 
    { name: 'Bank Data' }, 
    { name: 'Journal Entry' }, 
    { name: 'Journal Bank' }, 
    { name: 'Report', 
    submenu: [ 
     { name: 'General Ledger' }, 
     { name: 'Trial Balance' }, 
     { name: 'Profit/Loss' }, 
     { name: 'Balance Sheet' } 
    ] 
    }, 
    { name: 'Control' }, 
    { name: 'Input', 
    submenu: [ 
     { name: 'Company' }, 
     { name: 'Client' }, 
     { name: 'Bookie' }, 
     { name: 'Master' }, 
     { name: 'Client Agent' }, 
     { name: 'Bookie Balance' }, 
     { name: 'Import Client Data' }, 
     { name: 'Chart Of Account' }, 
     { name: 'Bank' }, 
     { name: 'Bank Company' } 
    ] 
    } 
] 

Dies ist der Fehler von eckigen geworfen.

app/app.component.ts(10,5): error TS2322: Type '({ name: string; } | { name: string; submenu: { name: string; }[]; })[]' is not assignable to type 'Navbar[]'. 
    Type '{ name: string; } | { name: string; submenu: { name: string; }[]; }' is not assignable to type 'Navbar'. 
    Type '{ name: string; submenu: { name: string; }[]; }' is not assignable to type 'Navbar'. 
     Object literal may only specify known properties, and 'submenu' does not exist in type 'Navbar'. 

Jede Hilfe würde mir so viel bedeuten. Vielen Dank!

Answer 1

Es gibt ein paar Dinge, die Sie ändern wollen ... Zunächst einmal würde ich vorschlagen, eine interface oder type anstelle eines class verwenden, weil Sie nicht new überall aufrufen.

Die andere Sache ist, dass mit submenu: array es nicht optional ist und daher in jedem Fall erwartet wird, was nicht der Fall sein wird (der Baum muss irgendwo anhalten). Sie können dies bezeichne eine ?

, die Sie mit einer Schnittstelle wie folgt verlassen:

export interface Navbar { 
    name: string; 
    submenus?: Navbar[]; 
} 

Welche dies funktioniert können:

const navbars: Navbar[] = [ 
    { name: 'Company Data' }, 
    { name: 'Client Data', 
    submenus: [ 
     { name: 'Balance' }, 
     { name: 'Settlement' } 
    ] 
    } 
]; 

Example