角度2@Input问题

Question

我是 Angular2 的新手，我尝试使用 @Input 但由于以下问题我无法继续。@Input后，组件不会继续。我已经在 chrome 开发人员工具中进行了验证，我看到执行在@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

我会在你的代码中看到一个问题。您忘记了subscribe回调中的this关键字：

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（模板）中。 并且开发工具不会将您带入订阅方法（异步调用），为此请保留调试器; 在订阅中。

想看看你的 Html。

应该像这样使用

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

Answer 3

这是因为在类之外定义了可用的Jobs变量。在类名 JobCategory 中定义它

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);
            });
        }
    }