我有一个包含电影列表的 movies.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 
  } 
} 

当然这是行不通的。你能告诉我该怎么办吗?我是新手 Angular

请您参考如下方法:

所以基本上你需要返回一个 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); 
  } 
} 

这是一个 Sample StackBlitz为您的引用。


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!