Kein Provider für Array?

Question

Wenn ich ng-Server kompilieren verwenden, kompiliert der Code kehrt aber diesen Fehler in der Chrome-Konsole:

dies mein app.component.ts ist. Dies ist, wo ich zum ersten Mal instanziiert die MySideMenu Dienst

import {SubMenu, MenuItem, MySideMenu} from './Modules/Layout/side-menu/side-menu.component'; 
import { ToastrService } from 'ngx-toastr'; 
import { Component, Renderer2, ElementRef, OnInit, ViewEncapsulation, HostBinding, ViewChild } from '@angular/core'; 
import { trigger, state, style, animate, transition } from '@angular/animations'; 
import { Subject } from 'rxjs/Subject'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    encapsulation: ViewEncapsulation.None, 
    providers: [MySideMenu, MenuItem, SubMenu] 
}) 
export class AppComponent implements OnInit { 
    private toolBarState= false; 

    ngOnInit() { 
    } 

    constructor(private renderer: Renderer2, public menuItems: MySideMenu) { 
    const item1 = new MenuItem('TCPO', 'fa fa-android', [ 
     new SubMenu('Insumos', 'fa fa-book'), 
     new SubMenu('CUB', 'fa fa-book'), 
     new SubMenu('Budget', 'fa fa-book') 
    ]); 
    const item2 = new MenuItem('Market', 'fa fa-money', [ 
     new SubMenu('Sell', 'fa fa-bomb'), 
     new SubMenu('Sign', 'fa fa-book'), 
    ]); 

    menuItems._items.push(item1); 
    menuItems._items.push(item2); 

    } 

    onToolBarClick() { 
    this.toolBarState = !this.toolBarState; 
    } 

} 

Die menuitems Variable in die Komponente übergeben mit diesem Code:

<appSideMenu [menuItems]='menuItems'></appSideMenu> 

nun die SideMenuModule, erklärt die SideMenuComponent, die die Dienstleistungen hat von wo ich denke, kommt der Fehler aus:

import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef, 
    Input, Injectable } from '@angular/core'; 
import { state, trigger, style, transition, animate } from '@angular/animations'; 

@Injectable() 
export class MySideMenu { 
    public _items: MenuItem[] = []; 
    constructor (items: MenuItem[]) { 
    this._items = items; 
    } 
} 

@Injectable() 
export class MenuItem { 
    public _title: string; 
    public _icon: string; 
    public _subMenu: SubMenu[] = []; 
    constructor(title: string, icon: string, subMenu: SubMenu[]) { 
    this._title = title; 
    this._icon = icon; 
    this._subMenu = subMenu; 
    } 
} 

@Injectable() 
export class SubMenu { 
    public _title: string; 
    public _icon: string; 
    constructor(title: string, icon: string) { 
    this._title = title; 
    this._icon = icon; 
    } 
} 


@Component({ 
    selector: 'appSideMenu', 
    templateUrl: './side-menu.component.html', 
    styleUrls: ['./side-menu.component.css'], 
    animations: [ 
    trigger('menuTrigger', [ 
     state('open', style({ width: '100px' })), 
     state('close', style({ width: '50px' })), 
     transition('open<=>close', animate('300ms ease-in')) 
    ])] 
}) 
export class SideMenuComponent implements OnInit { 

    state = 'close'; 
    activeMenuItem: number; 
    @Input() stateSubSideMenu = 'invisible'; 
    @Input() menuItems: MySideMenu; 

    constructor() { } 

    ngOnInit() { } 

    SideMenuToggle(el: HTMLElement) { 
    if (el.id === 'sidebar') { 
     (this.state === 'open') ? this.state = 'close' : this.state = 'open'; 
     this.stateSubSideMenu = 'invisible'; 
    }else { 
     (this.state === 'open') ? this.stateSubSideMenu = 'open' : this.stateSubSideMenu = 'close'; 
    } 
    } 

    onMenuItemClick(i: number) { 
    this.activeMenuItem = i; 
    (this.state === 'open') ? this.stateSubSideMenu = 'opened' : this.stateSubSideMenu = 'closed'; 
    } 

    trackByFn(index, item) { 
    return index; 
    } 

} 

Answer 1

(im Namen des OP) Eingestellt.

Hier ist, wie ich es gelöst habe.

Das Problem lag im Konstruktor. Ich habe ein leeres Array definiert, ohne es mit leeren Werten zu initialisieren. Jetzt wird MenuItem im Konstruktor mit public _subMenu: SubMenu[]= [] und nicht nur _subMenu: SubMenu[] initialisiert.

import { Injectable } from '@angular/core'; 

@Injectable() 
export class SubMenu { 
    /*public _title: string; 
    public _icon: string;*/ 
    constructor(public _title: string, public _icon: string) { 
    } 
} 

@Injectable() 
export class MenuItem { 
    /*public _title: string; 
    public _icon: string; 
    public _subMenu: SubMenu[] = [];*/ 
    constructor(public _title: string, public _icon: string, public _subMenu: SubMenu[]= []){ 
    } 
} 

@Injectable() 
export class MySideMenu { 
    public _items: MenuItem[] = []; 
} 

Jetzt ist mein SideMenu im Konstruktor meiner App.Component.ts

constructor(private renderer: Renderer2, public menuItems: MySideMenu) { 
    const item1 = new MenuItem('TCPO', 'fa fa-android', [ 
     new SubMenu('Inputs', 'fa fa-book'), 
     new SubMenu('CUB', 'fa fa-book'), 
     new SubMenu('Budget', 'fa fa-book') 
    ]); 
    const item2 = new MenuItem('Market', 'fa fa-money', [ 
     new SubMenu('Sell', 'fa fa-bomb'), 
     new SubMenu('Sign', 'fa fa-book'), 
    ]); 

    menuItems._items.push(item1); 
    menuItems._items.push(item2); 

    } 

und das Menü aufrufen I kann automatisch generiert:

Answer 2

Setzen Sie einfach das Array außerhalb des Konstruktors einer Klasse

export class Animal{  
    public animals: Animal[]; 
    constructor(private animal: Animal) { 
     this.animals = new Array<Animal>(); 
     animals.push(animal); 
    }   
}