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

Question

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

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

EXCEPTION：UnCaught（在Promise中）

这是我的相关代码：

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方法进行自我验证