Angular2 @Input issue

Question

Я новичок в Angular2 и пытаюсь использовать мою руку, используя @Input, но я не могу продолжить работу из-за проблемы ниже. После @Input компонент не работает дальше. Я проверил в хромированных инструментов разработчика, и я вижу, что выполнение выходит за пределы класса сразу после @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); 
      }); 
     } 
    } 

Может кто-то пожалуйста, помогите мне преодолеть.

HTML-тег

Answer 1

Я вижу проблему в вашем коде. Вы забыли this ключевое слово в subscribe обратного вызова:

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

Таким образом, вы сможете увидеть/использовать availableJobs свойство в шаблоне компонента ...

Answer 2

Похоже, проблема в вашем HTML (шаблон). и инструменты dev не приведут вас к методу подписки (асинхронный вызов), для этого, пожалуйста, храните отладчик; внутри подписаться.

Хотелось бы увидеть ваш Html.

следует использовать как

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

Answer 3

это произошло из-за определения availableJobs переменную вне класса. Определить его в имени класса 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); 
      }); 
     } 
    }