Angular 6: используйте сервис для получения локальных данных json

Question

У меня имеется файл movie.json, в котором содержится список фильмов, и я хочу создать MoviesServices, чтобы получать данные в нужном месте.

Мои фильмыУслуги:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class MoviesService {

  movies: string[];

  constructor(private httpService: HttpClient) {
    this.getMovies();
  }

  getMovies() {
    this.httpService.get('../../assets/movies.json').subscribe(
      data => {
        this.movies = data as string[];
        console.log(this.movies); // My objects array
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );
    console.log(this.movies); // Undefined
  }

}

Во-первых, я понятия не имею, почему первый console.log () работает, а второй нет. Скажите, почему?

Вот мой компонент, где мне нужно получить данные:

import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../services/movies/movies.service';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.css']
})

export class MoviesComponent implements OnInit {
  title = 'films-synopsys';
  movies;

  constructor(private myService: MoviesService) {}

  ngOnInit() {
    console.log(this.myService.movies); // Undefined
  }
}

Конечно, это не работает. Можете ли вы сказать мне, как я должен делать? Я новичок угловой

Answer 1

Измените свой метод, чтобы он возвращал Observable, на который вы можете подписаться:

import { Observable } from 'rxjs/Observable';
...
getMovies(): Observable<string []> {
    this.httpService.get('../../assets/movies.json').subscribe(
      data => {
        this.movies = data as string[];
        return this.movies;
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      }
    );
  }

В вашем телефонном коде:

import { Subscription } from 'rxjs/Subscription';

this.myService.getMovies().subscribe(movies => {
  console.log(movies); // My objects array
}

Answer 2

Таким образом, вам нужно вернуть Observable от вашего сервиса и затем subscribe от вашего Компонента. Затем вы можете присвоить response свойству компонента movies

Попробуйте это:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MoviesService {

  constructor(private httpService: HttpClient) { }

  getMovies() {
    return this.httpService.get('../../assets/movies.json');
  }

}

И в вашем компоненте:

import { Component } from '@angular/core';
import { MoviesService } from './movies.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'films-synopsys';
  movies;

  constructor(private myService: MoviesService) {}

  ngOnInit() {
    this.myService.getMovies()
      .subscribe(res => this.movies = res);
  }
}

Вот Образец StackBlitz для вашей ссылки.

Answer 3

Причина, по которой работает первый консольный журнал, заключается в том, что вы делаете это в рамках подписки наблюдаемого. Подписки имеют три состояния: Next, Error, Complete, поэтому при первом входе в консольный журнал в состоянии подписки next вы получаете значение, которое было вытеснено из потока событий.

В вашем компоненте причина, по которой он не работает, заключается в том, что наблюдаемые являются ленивыми, и вам нужно инициализировать данные, сначала вызвав this.myService.getMovies(), чтобы подписка произошла.

Лучший способ сделать это - обойти наблюдаемые и использовать async pipe в html-шаблоне.