angular - Angular2: Nu se poate găsi un diferențiator care să suporte obiectul din clasa serviciu

Urmez un curs pe Udemy - Angular 2 cu TypeScript pentru Începători și am întâlnit o eroare care nu îmi este foarte clară în ceea ce privește Serviciile.

Am un component care afișează o listă de cursuri. Sau o listă de șiruri de caractere sub formă de array-uri.

Așa cum implică cursul, în viața reală nu vei primi o listă de elemente codificate direct, ci vei apela un serviciu pentru a o obține. Exemplul apelează o altă clasă de serviciu pentru a o obține (pentru moment, această clasă returnează o listă codificată direct).

Am o clasă de serviciu numită CourseService care returnează un șir de șiruri:

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

}

și componenta mea are un șablon care folosește un *ngFor pentru a parcurge o variabilă locală numită courses. Variabila courses este instanțiată prin preluarea array-ului din clasa de serviciu folosind injecția de dependență în 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"];
    }
}

Când rulez acest exemplu, cursurile nu se afișează și primesc următoarea eroare în consolă:

Clasa returnează pur și simplu un array de stringuri. Dacă înlocuiesc acel fetch cu un string[] codificat direct, totul funcționează și se afișează corect.

Nu sunt sigur dacă există o problemă cu clasa propriu-zisă sau cu injecția de dependență. Presupun că, deoarece se plânge de clasă și de linia 4, aceasta chiar instanțiază și folosește clasa.

Conform sugestiei lui @5313M, folosirea acestuia conduce la următoarele:

Totuși, văd că, având codul meu, primesc următoarea eroare: Funcția returnează string[] și variabila mea este string[]. De ce va exista acest conflict:

Răspuns #1

Schimbă-l în :

this.courses = courseService.getCourses();

Răspunsul #2

Vă rugăm să înlocuiți codul dumneavoastră cu cel de mai jos și să încercați:

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