Angular2 @Input问题

Question

I am new to Angular2 and my trying my hand using @Input but I am not able to proceed because of the below issue. After the @Input the component does not proceed further. I have verified in chrome developer tools and I see that execution goes outside the class immediately after the @Input

import {Component, Input, OnInit} from 'angular2/core';
    import {Http, HTTP_PROVIDERS} from 'angular2/http';
    import 'rxjs/Rx';

    var availableJobs = [];


    @Component({
      selector: 'job-categories',
      templateUrl:'templates/job.categories.html',
      providers:[HTTP_PROVIDERS]

    })

    export class JobCategories{

      @Input('rows') rows: string;
      @Input('cols') columns: string;


constructor(http: Http){
        http.get('appjs/dummyjson.json').map(res => res.json()).subscribe(
            (data) => {
              availableJobs = data;
              console.log(availableJobs);
            });
        }
    }

Could someone please help me overcome.

The HTML tag is

Answer 1

I would see a problem in your code. You forgot the this keyword within the subscribe callback:

constructor(http: Http){
    http.get('appjs/dummyjson.json').map(res => res.json()).subscribe(
        (data) => {
          this.availableJobs = data; // <-----
          console.log(this.availableJobs);
        });
    }
}

This way you will be able to see / use the availableJobs property in the template of the component...

Answer 2

Seems like the problem is in your html(template). and the dev tools will not brings you into the subscribe method(async call), for that please keep a debugger; inside subscribe.

Would like to see your Html.

should be used like

<job-categories [rows]="someRowVariable" [cols]="someColVariable" ></job-categories>

Answer 3

this happened because of defining a availableJobs variable outside a class . Define it within class name JobCategories

import {Component, Input, OnInit} from 'angular2/core';
    import {Http, HTTP_PROVIDERS} from 'angular2/http';
    import 'rxjs/Rx';




    @Component({
      selector: 'job-categories',
      templateUrl:'templates/job.categories.html',
      providers:[HTTP_PROVIDERS]

    })

    export class JobCategories{
      var availableJobs = [];  //Define within a class
      @Input('rows') rows: string;
      @Input('cols') columns: string;


constructor(http: Http){
        http.get('appjs/dummyjson.json').map(res => res.json()).subscribe(
            (data) => {
              availableJobs = data;
              console.log(availableJobs);
            });
        }
    }