Angular2 @輸入問題

我是Angular2的新手，我在用@Input嘗試我的手，但由於下面的問題我無法繼續。 @Input之後，組件不會繼續進行。我在Chrome開發者工具已經驗證了，我看到那張執行類外的@inputAngular2 @輸入問題

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標籤是

來源

2016-04-25 Raviteja Avvari

什麼是「組件沒有進一步進行。」和「執行走出課堂」是什麼意思？我看不出有什麼明顯的錯誤。 –

是的。因此，我來到StackOverflow尋求幫助。意思是說，chrome開發工具上的F10不會將執行帶到下一行，但它會帶我到課程末尾 –

您期望什麼行爲？ –

我會在你的代碼中看到的一個問題。你忘了subscribe回調中的this關鍵字：

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

這樣你就可以看到/使用availableJobs財產組件的模板......

來源

2016-04-25 07:41:42

也許OP沒有忘記它，它被定義爲局部變量'var availableJobs = [];'不是實例屬性 – dfsq

是的，但我猜他想在組件模板中使用'availableJobs' ;-) –

@dfsq是的，我確實聲明爲局部變量。感謝您的努力。問題已解決 –

好像問題出在你的HTML（模板）。開發工具不會將你帶入訂閱方法（異步調用），爲此請保留一個調試器;裏面訂閱。

想看看你的Html。

應使用像

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

來源

2016-05-24 11:08:44

發生這種情況是因爲定義類以外的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); 
      }); 
     } 
    }

來源

2016-06-25 09:15:05

Angular2 @輸入問題

回答

相關問題