inputing data with angularjs 2 using services

Question

So I'm learning angularjs 2 and having trouble understanding the uses of service and getting it to work with my app.

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

mock-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'}
];

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

so my goal is getting the data from my mock-films into my film list but it is not showing up for some reason. It probably the film-list.component.ts but not sure where the error is.

May I know what error you're getting?

Pankaj Parkar
– Pankaj Parkar

2016-11-02 05:14:22 +00:00
Commented Nov 2, 2016 at 5:14 — Pankaj Parkar
– Pankaj Parkar, Commented Nov 2, 2016 at 5:14

Amy · Accepted Answer · 2016-11-02 05:37:53Z

1

fix in here

  public films: Film[]=[];

OR

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

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

edited Nov 2, 2016 at 5:37

answered Nov 2, 2016 at 5:10

Amy

1311 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3296193 Over a year ago

thank you, it work. can you explain why that works so I have a good understanding for it?

Amy Over a year ago

public films: Film[]=[]; you need to tell what is this like this eg.public flim:string="";if you declare like this public films :Flim[] this will undefined and give you error.

Collectives™ on Stack Overflow

inputing data with angularjs 2 using services

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related