AUSNAHME: Uncaught (in Promise). Eingespritzter Service in Angular 2

Question

Ich kann eine Angular-Komponente nicht rendern, und ich kann es nicht herausfinden.

Es ist etwas mit der Methode verbunden, die eine Dienste für das Injizieren von Daten aufruft. Es kehrt die error's Nachricht unter:

AUSNAHME: abgefangene (in Versprechen)

Das ist mein entsprechender Code:

cartelera-list.component.ts

import { Component, OnInit } from '@angular/core'; 

import { CarteleraService } from './cartelera.service'; 
import { Pelicula } from './pelicula.model'; 

@Component({ 
    selector: 'cartelera-list', 
    template: ` 
    <ul> 
    <li *ngFor="let pelicula of cartelera"> 
     <p>+++ {{ pelicula.titulo }} - {{ pelicula.genero }} - {{ pelicula.duracion }} </p> 
    </li> 
    </ul> 
    `, 
    providers: [CarteleraService] 
}) 

    export class CarteleraListComponent implements OnInit { 

    public cartelera: Pelicula[]; 

    contructor(private carteleraService: CarteleraService) {} 

    getPeliculas(): void { 
     this.carteleraService.getPeliculas().then((cartelera: Pelicula[]) => this.cartelera = cartelera); 
    } 

    ngOnInit(): void { 
     this.getPeliculas(); 
    } 

} 

carterera.service.ts

import { Injectable } from '@angular/core'; 

import { Pelicula } from './pelicula.model'; 
import { CARTELERA } from './pelicula-data'; 

@Injectable() 
export class CarteleraService { 
    getPeliculas(): Promise<Pelicula[]> { 
     return Promise.resolve(CARTELERA); 
    } 
} 

Der vom Service zurückgegebene Parameter CARTELERA ist nur eine const Verbindung durch eine Liste von Pelicula (Interface - Modell).

Hinweis: Der complet message's Fehler ist:

AUSNAHME: abgefangene (in Promise) Kann nicht Eigentum 'getPeliculas' undefinierter Fehler lesen.

Hinweis: Ich habe versucht, diesen Satz vor

contructor (privat carteleraService: CarteleraService) {}

Aber, wenn ich es benutzt, wird der nächste Fehler angezeigt, in der Kompilierung Zeit.

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 

import { routing } from './app.routing'; 

import { SociosComponent } from './socios.component'; 
import { Index } from './index'; 
import { CarteleraComponent } from './cartelera.component'; 
import { CarteleraListComponent } from './cartelera-list.component'; 


@NgModule({ 
    imports:  [ 
    BrowserModule, 
    FormsModule, 
    routing  
    ], 
    declarations: [ 
    AppComponent, 
    SociosComponent, 
    Index, 
    CarteleraComponent, 
    CarteleraListComponent 
    ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule {} 

Answer 1

Echonax war fast richtig. Neben den Änderungen echonax Sie einen Tippfehler haben vorgeschlagen:

contructor(private carteleraService: CarteleraService) {} 

sollte constructor, so dass Sie s fehlten.

Als eine Nebenbemerkung, würde ich die providers: [CarteleraService] aus Ihrer Cartelera-Liste entfernen.Komponente, und es in Ihrem NgModule als Anbieter erklärt:

providers: [CarteleraService] 

, die den Dienst in der gesamten Modul macht, so dass Sie nicht importieren müssen und erklären es in allen Komponenten, die Sie benötigen. Nur ein Vorschlag! ;)

Answer 2

ändern

private carteleraService: CarteleraService; 

contructor(carteleraService) {} 

mit

contructor(private carteleraService: CarteleraService) {} 

Auf diese Weise injiziert Angular DI CarteleraService zu Ihrem this.carteleraService

Answer 3

versuchen folgende Art und Weise unter Verwendung von manuell promise

@Injectable() 
export class CarteleraService { 
    getPeliculas(): Promise<Pelicula[]> { 

return new Promise((resolve, reject) => { 
    resolve(CARTELERA); 
    }); 
} 
} 

Sie sind nicht definiert, Versprechen in der richtigen Art und Weise zu schreiben. Versuchen Sie die Konsolenprotokollierung getPeliculas Methode in Service es selbst zu verifizieren