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

Question

我无法渲染一个有角度的组件，我无法弄明白。

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

例外：UnCaught（承诺）

这是我的相关代码：

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化合物。

注意 ：complet消息的错误是：

EXCEPTION：UnCaught（在Promise中）无法读取未定义错误的属性'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

更改

private carteleraService: CarteleraService;

contructor(carteleraService) {}

同

contructor(private carteleraService: CarteleraService) {}

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

Answer 2

Echonax几乎是正确的。 除了改变echonax建议你有一个错字：

contructor(private carteleraService: CarteleraService) {}

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

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

providers: [CarteleraService]

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

Answer 3

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

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

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

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