Estoy siguiendo un curso sobre Udemy-Angular 2 con TypeScript para principiantes y encontré un error que no es tan obvio para mí wrt Services.

Tengo un componente que muestra una lista de cursos. O una lista de matrices de cadenas.

Como el curso implica que en la vida real no obtendrá una lista codificada de elementos para mostrar, pero llamará a algún servicio para recuperarlo. El ejemplo llama a otra clase de servicio para recuperarlo (por ahora en esta clase es una lista codificada que devuelve)

Tengo una clase de servicio llamada CourseService que devuelve una serie de cadenas:

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

}

Y mi componente tiene una plantilla que usa un * ngFor para recorrer una variable local llamada cursos. La variable de cursos se instancia obteniendo la matriz de la clase de servicio utilizando la inyección de dependencia en el 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"];
    }
}

Cuando ejecuto este ejemplo, los cursos no se muestran y aparece el siguiente error en la consola:

enter image description here

La clase simplemente devuelve una matriz de cadenas. Si elimino esa búsqueda con una cadena codificada [], todo funciona y se muestra correctamente.

No estoy seguro de si hay un problema con la clase real o la inyección de dependencia. Supongo que, dado que se queja de la clase y la línea 4, en realidad instancia y usa la clase.

Según @ 5313M, la sugerencia de usar esto da como resultado lo siguiente: ingrese la descripción de la imagen aquí

Sin embargo, veo que, como tenía mi código, obtengo el siguiente error: La función está devolviendo la cadena [] y mi variable es la cadena []. ¿Por qué este conflicto? ingrese la descripción de la imagen aquí

3
Chrispie 30 dic. 2016 a las 02:47

3 respuestas

La mejor respuesta

Cuestión muy tonta. Me enseñará a no usar intellisense / autocompletar.

Según la recomendación del curso, deberíamos usar vs editor. No estoy seguro si es el editor o angular-2, pero si vas a courseService. y Ctrl + Espacio para que se complete y seleccione el método que completa el método pero no agrega el () en las llamadas al método.

Por lo tanto tuve:

this.courses = courseService.getCourses; 

En lugar de:

this.courses = courseService.getCourses();
0
Chrispie 30 dic. 2016 a las 10:00

Reemplace su código con el siguiente e intente:

 <li *ngFor='let course of courses'>
            {{ course }}
</li>
courses : string[];
this.courses = this.courseService.getCourses();
0
user6801750 30 dic. 2016 a las 04:14

Cámbielo a:

this.courses = courseService.getCourses();
3
selem mn 30 dic. 2016 a las 06:38