サービスを使用してangularjs 2でデータを入力

Question

私はangularjs 2を学び、サービスの使い方を理解し、それを私のアプリケーションで使えるようにしています。だから私の目標は私のモックからデータを取得している

film.services.ts

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

import { Film } from './film'; 
import { FILMS } from './mock-films'; 

@Injectable() 
export class FilmService { 
    getFilms(): Promise<Film[]> { 
    return Promise.resolve(FILMS) 
    } 
} 

モックフィルム

import { Film } from './film'; 

//storing the data in array 
export const FILMS: Film[] = [ 
    {id:11, title: 'pokemon', summary:'great'}, 
    {id:12, title: 'naruto', summary: 'good'}, 
    {id:13, title: 'bleach', summmary: 'meh'}, 
    {id:14, title: 'one piece', summary: 'not bad'} 
]; 

フィルムlist.components.ts

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable' 
import { FilmService } from '../film.service'; 
import { Film } from "../film"; 

@Component({ 
    template: ` 
    <h1>List of Films</h1> 
    <p>Films:</p> 
    <ul> 
    <li *ngFor="let film of films "> 
    <a [routerLink]="['/films', film.id]">{{film.title}}</a> 
     </li> 
    </ul> 
    <p *ngIf="films.length > 3">There are many vietnamese films to learn about!</p> 
`, 
    // important when adding to service other crashes 
    providers: [FilmService] 
}) 

//Component class 
export class FilmListComponent implements OnInit { 
    public films: Film[]; 
    constructor(private filmService: FilmService) {} 

    getFilms(){ 
    this.filmService.getFilms().then((films: Film[]) => this.films = films); 
    } 

    ngOnInit():any { 
    this.getFilms() 
    } 
} 

映画は私の映画リストに入っていますが、何らかの理由で表示されません。それはおそらくfilm-list.component.tsですが、どこにエラーがあるのか​​わかりません。

Answer 1

ここ

public films: Film[]=[]; 

OR

public films: Film[]; 
    constructor(private filmService: FilmService) {} 
    getFilms(){ 
     this.flims=[]; 
     this.filmService.getFilms().then((films: Film[]) => this.films = films); 
     } 

フィルムlist.components.tsで修正

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable' 
import { FilmService } from '../film.service'; 
import { Film } from "../film"; 

@Component({ 
    template: ` 
    <h1>List of Films</h1> 
    <p>Films:</p> 
    <ul> 
    <li *ngFor="let film of films "> 
    <a [routerLink]="['/films', film.id]">{{film.title}}</a> 
     </li> 
    </ul> 
    <p *ngIf="films.length > 3">There are many vietnamese films to learn about!</p> 
`, 
    // important when adding to service other crashes 
    providers: [FilmService] 
}) 

//Component class 
export class FilmListComponent implements OnInit { 

    public films: Film[]; 
    constructor(private filmService: FilmService) {} 

    getFilms(){ 

    this.flims=[];//fix in here 
    this.filmService.getFilms().then((films: Film[]) => this.films = films); 
    } 

    ngOnInit():any { 
    this.getFilms() 
    } 
}