Angular2：サービスクラスと異なるサポート対象が見つかりません

Question

私はUdemy-Angular 2 with TypeScript for Beginnersのコースを卒業していて、サービスにはそれほど明らかではないエラーが発生しました。

私はコンポーネントハットにコースリストを表示しています。文字列配列のリスト。

実際の生活では、表示する項目のハードコーディングされたリストを取得することはできませんが、検索するためにいくつかのサービスを呼び出すことを意味します。

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

} 

：例では、私は文字列の配列を返しますCourseServiceと呼ばれるサービスクラスを持っている

（今のところ、このクラスでは、返されることをハードコーディングされたリストである）、それを取得するために別のサービスクラスを呼び出します私のコンポーネントには、* ngForを使ってコースと呼ばれるローカル変数をループするテンプレートがあります。コース変数はコンストラクタで依存性注入を使用してサービスクラスから配列をフェッチすることによってインスタンス化されます：私はこの例を実行すると

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の提案を1として

は以下が得られている：

は、しかし、私は、私は私のコードを持っていたとして、私は次のエラーを取得していますことを参照してください。関数は、文字列[]と私の変数を返します文字列[]です。なぜ、この競合します：

Answer 1

非常に愚かな問題を。インテリセンス/オートコンプリートを使用しないように教えてくれます。

コースの推奨事項として、vs editorを使用する必要があります。 courseServiceに行くのはエディタか角2かどうかわかりませんが、メソッドを完了するためのメソッドを選択して終了するにはCtrl +スペースを使用しますが、メソッド呼び出しには（）を追加しません。

は、そこで私が持っていた：

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