Angular2 - 구성 요소의 데이터를 표시하지 않습니다.

Question

Angular2 베타 versiopn에 대한 교육을 받고 있는데 여기에는 데이터를 표시하려고하는 두 개의 구성 요소가 있습니다. 이것은 내 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(); 
    } 
} 

사람이 코드의 차이와 문제의 첫 번째가 무엇인지 나를 설명 할 수 있다면, 나는 것 컴포넌트 데코레이터와 클래스 선언 사이에 빈 행 이외의 다른 차이점을 볼 수 없기 때문에 매우 감사해야합니다. 여기에서 코드를 복사하여 복사하여 공간을 만들었더라도 여전히 데이터를 표시 할 수는 없지만 지금 여기에 표시된 코드를 사용하면 작동합니다! 어떻게 왜? 이 상황에서 나 자신을 얻을 때 어떻게 앱을 디버그 할 수 있습니까? 그리고 데이터가 나타나지 않을 때 콘솔에 오류가 없었습니다.

Answer 1

이 기사를 체크 아웃 것이다 :

Difference between Constructor and ngOnInit

생성자에서 서비스를 초기화하고 서비스를 호출하는 각도 "ngOnInit"를 사용하는 일반적으로 더 나은 방법입니다. 이 기사에서는 이유를 철저히 설명합니다.