CODEWITHSUNDEEP
angulartypescriptservice
cp5
cp5

Reputation: 1133

Angular2: Cannot find a differ supporting object from service class

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:

enter image description here

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: enter image description here

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: enter image description here

Upvotes: 3

Views: 588

Answers (4)

Filip van der Flier Cejkovski
Filip van der Flier Cejkovski

Reputation: 41

this.courses = courseService.getCourses;

You didn't put the parentheses in the calling of the method:

this.courses = courseService.getCourses();

Upvotes: 0

cp5
cp5

Reputation: 1133

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

Upvotes: 0

SeleM
SeleM

Reputation: 9638

Change it to :

this.courses = courseService.getCourses();

Upvotes: 3

user6801750
user6801750

Reputation: 242

Please replace your code with the below and try:

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

Upvotes: 0

Related Questions