Search code examples
angularangular2-components

Exception self.context.XXX.subscribe is not a function

In my Angular 2 app I need to pass an array from one component to another one. I have a component named SystemDynamicsComponent that exposes one array sdFactors:

@Component({
   selector: "system-dynamics",
   templateUrl: "/app/component/main/template/system-dynamics.html"
})

export class SystemDynamicsComponent implements OnInit {
    private dialogDisplayed: boolean = false;
   @Output() sdFactors: any[] = [];

In the component named InputModuleComponent I need to read this value as follows:

Template:

<system-dynamics (sdFactors)="this.sdFactors"></system-dynamics>

Component:

export class InputModuleComponent implements OnInit {
...
sdFactors: any[] = [];

When launchig the input module component, I receive this error message from Angular: TypeError: self.context.sdFactors.subscribe is not a function at Wrapper_SystemDynamicsComponent.subscribe (wrapper.ngfactory.js:38) at View_InputModuleComponent6.createInternal (component.ngfactory.js:3103) at View_InputModuleComponent6.AppView.create (core.umd.js:12262) at View_InputModuleComponent6.DebugAppView.create (core.umd.js:12666) at TemplateRef_.createEmbeddedView (core.umd.js:9320) at ViewContainerRef_.createEmbeddedView (core.umd.js:9552)

Any ideas what I am missing?

Solution

  • Try this

    <system-dynamics (sdFactors)="sdFactors"></system-dynamics>

    instead of 

    <system-dynamics (sdFactors)="this.sdFactors"></system-dynamics>

    you dont need to add this in the template for binding. Variables from the same class can be accessed without this in the template.

    Update

    @output is used for event binding not for property binding , you have to use @input for passign array or some variable value so use this like this

    <system-dynamics [sdFactors]="sdFactors"></system-dynamics>

    and in you component like this

    @Component({
   selector: "system-dynamics",
   templateUrl: "/app/component/main/template/system-dynamics.html"
})

export class SystemDynamicsComponent implements OnInit {
    private dialogDisplayed: boolean = false;
   @Input() sdFactors: any[] = [];