Angular2 - コンポーネントからのデータが表示されない

Question

私はAngular2 beta Versiopnのコースに従っています。そこには、データを表示しようとしている2つのコンポーネントがあります。これは私のapp.componentです：

import {Component} from 'angular2/core'; 
import {CoursesComponent} from './courses.component' 
import {AuthorsComponent} from './authors.component' 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>Hello Angular 2 App</h1> 
     <courses></courses> 
     <authors></authors> 
     `, 
    directives: [CoursesComponent, AuthorsComponent] 
}) 
export class AppComponent { } 

そして、これは、コースの構成要素である：

import {Component} from 'angular2/core'; 
import {CourseService} from './course.service'; 
import {AutoGrowDirective} from './auto-grow.directive'; 

@Component({ 
    selector: 'courses', 
    template: ` 
    <h2>{‌{ title }}</h2> 
    <input type="text" autoGrow /> 
    <ul> 
     <li *ngFor="#course of courses"> 
     {‌{ course }} 
     </li> 
    </ul> 
    `, 
    providers: [CourseService], 
    directives: [AutoGrowDirective] 
}) 
export class CoursesComponent { 
    title: string = "The title of courses page"; 
    courses; 

    constructor(courseService: CourseService) { 
    this.courses = courseService.getCourses(); 
    } 
} 

そして、これは作者のコンポーネントである：著者のコンポーネントから

import {Component} from 'angular2/core' 
import {AuthorService} from './author.service' 

@Component({ 
    selector: 'authors', 
    template: ` 
    <h2>{{ title }}</h2> 
    <ul> 
     <li *ngFor="#author of authors"> 
     {{ author }} 
     </li> 
    </ul> 
    `, 
    providers: [AuthorService] 
}) 

export class AuthorsComponent { 
    title: string = "The title of authors page"; 
    authors; 

    constructor(authorService: AuthorService) { 
    this.authors = authorService.getAuthors(); 
    } 
} 

補間データ表示されますコース構成要素からではありません。 なぜ、私はそれをデバッグすることができますか分からないのですか？

更新

は、私はこのコードでデータを表示するために管理：

@Component({ 
    selector: 'courses', 
    template: ` 
    <h2>{{ title }}</h2> 
    <input type="text" autoGrow /> 
    <ul> 
     <li *ngFor="#course of courses"> 
     {{ course }} 
     </li> 
    </ul> 
    `, 
    providers: [CourseService], 
    directives: [AutoGrowDirective] 
}) 

export class CoursesComponent { 
    title: string = "The title of courses page"; 
    courses; 

    constructor(courseService: CourseService) { 
    this.courses = courseService.getCourses(); 
    } 
} 

誰かがこのコードの違い、問題の最初の1が何であるかを私に説明することができた場合、私は希望コンポーネントデコレータとクラス宣言の間に空の行以外の違いは見られないので、とても感謝していますか？私がここからコピーしたコードをコピーしてそのスペースを作っても、データを表示することができませんが、今ここに示したコードを使用すると、動作します！どのように、なぜ？私はどのようにこの状況で自分自身を得るとき、私はアプリをデバッグできますか？また、データが表示されないときにコンソールにエラーはありませんでした。

Answer 1

私はこの記事をチェックアウトします：

Difference between Constructor and ngOnInit

一般的に、コンストラクタであなたのサービスを初期化し、あなたのサービスを呼び出すために、角度「ngOnInit」を使用するには良い習慣です。記事では理由を完全に説明しています。