Angular2：找不到与服务类不同的支持对象

Question

I am following a course on Udemy-Angular 2 with TypeScript for Beginners and ran into an error that is not that obvious to me wrt Services.

I have a component hat is displaying a list of courses. Or a list of string arrays.

As the course implies that in real life you will not get a hard coded list of items to display but will call some service in order to retrieve it. The example calls another service class to retrieve it (for now in this class it is a hard coded list that it returns)

I have a service class called CourseService that returns an array of strings:

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

}

and my component has a template using an *ngFor to loop through a local variable called courses. The courses variable gets instantiated by fetching the array from the service class using dependency injection in the constructor:

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"];
    }
}

When I run this example the courses do not display and I get the following error in the console:

The class is simply returning a string array. If I swop out that fetch with a hardcoded string[] all works and display correctly.

Not sure if there is a problem with the actual class or the dependency injection. I suppose since it is complaining about the class and line 4 it does actually instantiate and uses the class.

As per @5313M suggestion using the this is resulting in the following:

However I see that as I had my code I am getting the following error: The function is returning string[] and my variable is string[]. Why will this conflict:

Answer 1

将其更改为：

this.courses = courseService.getCourses();

Answer 2

Please replace your code with the below and try:

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

Answer 3

Very silly issue. Will teach me not to use intellisense/autocomplete.

As per the course recommendation we should use vs editor. Not sure if it is the editor or angular-2 but if you go courseService. and Ctrl+Space for it to complete and select the method it completes the method but doesn't add the () on the method calls.

Hence I had:

this.courses = courseService.getCourses; 

Instead of:

this.courses = courseService.getCourses();

Answer 4

this.courses = courseService.getCourses;

您没有在方法的调用中放置括号：

this.courses = courseService.getCourses();