例外：未捕获（在 Promise 中）。 Angular 2 中的注入服务

Question

我无法渲染 Angular 的组件，我也想不通。

这与调用服务注入数据的方法有关。它正在返回以下错误消息：

例外：未捕获（承诺中）

这是我的相关代码：

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

}

cartelera.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);
    }
}

服务返回的参数 CARTELERA 只是一个由 Pelicula 列表（接口 - 模型）组成的 const 化合物。

注意：完整消息的错误是：

例外：未捕获（在承诺中） 无法读取未定义错误的属性“getPeliculas”。

注意：这句话我之前试过

contructor(private carteleraService: CarteleraService) {}

但是，当我使用它时，会在编译时出现下一个错误。

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 几乎是正确的。除了 echonax 建议的更改之外，您还有一个错字：

contructor(private carteleraService: CarteleraService) {}

应该是constructor，所以你错过了s。

作为旁注，我将从您的 cartelera-list.component 中删除 providers: [CarteleraService]，并在您的 NgModule 中将其声明为提供者：

providers: [CarteleraService]

这使得该服务在整个模块中可用，因此您无需在所需的所有组件中导入和声明它。只是一个建议！ ;)

Answer 2

改变

private carteleraService: CarteleraService;

contructor(carteleraService) {}

与

contructor(private carteleraService: CarteleraService) {}

这样，Angular DI 会将CarteleraService 注入到您的this.carteleraService

Answer 3

尝试使用以下方式手动编写promise

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

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

您没有以正确的方式定义承诺。尝试控制台记录 getPeliculas 方法在服务中自行验证