Angular2 : 서비스 클래스와 다른 지원 대상을 찾을 수 없습니다.

Question

나는 Udemy-Angular 2 with TypeScript for Beginners에있는 코스를 따라 가고 있으며, 서비스에 명백하지 않은 오류가 발생했습니다.

구성 요소 모자가 코스 목록을 표시하고 있습니다. 또는 문자열 배열 목록입니다.

물론 실제 생활에서는 표시 할 항목의 하드 코딩 된 목록을 가져 오지 않지만 검색하기 위해 일부 서비스를 호출합니다.

export class CourseService { 
    getCourses() : string[] {   
     return ["Course1", "Course2", "Course3"]; 
    } 

} 

: 예 내가 문자열 배열을 반환하는 서비스 클래스라는 CourseService을

이 (그것이 반환 하드 코딩 된 목록이 클래스에서 지금은) 그것을 검색하는 다른 서비스 클래스를 호출 내 구성 요소에는 * ngFor를 사용하여 courses라는 로컬 변수를 순환하는 템플릿이 있습니다. 코스 변수는 생성자에서 의존성 주입을 사용하여 서비스 클래스에서 배열을 가져 오는에 의해 초기화됩니다 :이 예제를 실행하면

import {Component} from 'angular2/core' 
import {CourseService} from './course.service' 

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

    constructor(courseService:CourseService) {     
     //if i get the courses array from the courseService I get the following error in the browser 
     /*angular2.dev.js:23083 EXCEPTION: Cannot find a differ supporting object 'function() { 
        return ["Course1", "Course2", "Course3"]; 
       }' in [courses in CoursesComponent@4:16] 
     I cannot see what is wrong at line 4 in CoursesComponent as it is returning the same string*/ 
     this.courses = courseService.getCourses; 

     //If I comment out the above line of codeand don't fetch the courses from the service but from a new array it works. 
     //this.courses = ["Course1", "Course2", "Course3"]; 
    } 
} 

이 과정이 표시되지 않습니다 나는 콘솔에 다음과 같은 오류가 발생합니다 :

클래스는 단순히 문자열 배열을 반환합니다. 하드 코딩 된 문자열 []로 가져 오기를 실행하면 모든 것이 올바르게 작동하고 올바르게 표시됩니다.

실제 클래스 또는 종속성 삽입에 문제가 있는지 확실하지 않습니다. 클래스와 라인 4에 대해 불평하고 있기 때문에 실제로 인스턴스화하고 클래스를 사용한다고 가정합니다. 다음은이를 사용하여 @의 5313M 제안 사항에 따라

는 다음의 결과입니다 :

그러나 나는 내 코드를 가지고 나는 다음과 같은 오류를 얻고 있음을 참조하십시오 함수는 문자열 [] 내 변수를 반환 문자열 []입니다. 왜이 충돌합니다

Answer 1

매우 어리석은 문제를. Intellisense/autocomplete를 사용하지 않도록 가르쳐 줄 것입니다.

코스 추천에 따라 우리는 vs editor를 사용해야합니다. editor 또는 angular-2인지 여부는 모르지만 courseService로 이동하면 알 수 있습니다. 및 Ctrl + Space를 사용하여 메소드를 완료하고 메소드를 완료하지만 메소드 호출에()를 추가하지 않습니다.

는 그러므로 내가했다 :

this.courses = courseService.getCourses; 

대신에 :

this.courses = courseService.getCourses(); 

Answer 2

변경 그것에 :

this.courses = courseService.getCourses(); 

Answer 3

은 아래로 코드를 교체하고 시도하십시오 :

<li *ngFor='let course of courses'> 
      {{ course }} 
</li> 
courses : string[]; 
this.courses = this.courseService.getCourses();