Угловая привязка данных 2

Question

Когда мое приложение запускается первым, я хочу, чтобы player.service сделал запрос HTTP и сохранил данные в качестве переменной в моей службе для доступа к моим компонентам. Моя служба делает запрос очень точным, и данные сохраняются, но мое представление никогда не обновляется.

В моем playerlist.component Я вставляю службу, чтобы иметь доступ к переменной, но я не могу получить данные. Я думаю, это потому, что мне нужно сделать все это, чтобы это произошло.

Все, что я хочу, это мой список, который, по моему мнению, заполняется, когда страница загружается и имеет, и убедитесь, что все мои будущие компоненты имеют доступ к одному источнику данных для предотвращения нескольких HTTP-запросов.

В моем app.component я включил player.service и поместил его в поставщиков ... если это имеет значение.

player.service

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class PlayerListService { 

    public playerListData; 

    constructor(private http:Http) { 
     this.getPlayerData().subscribe(
      data => this.playerListData = data 
     ); 
    } 

    getPlayerData =():Observable<any> => { 
     return this.http.get('my-api').map(response => response.json()) 
    } 
} 

playerlist-компонент

import { Component, OnInit } from '@angular/core'; 
import { PlayerListService } from '../shared/index'; 

@Component({ 
    selector: 'app-player-list', 
    templateUrl: './player-list.component.html', 
    styleUrls: ['./player-list.component.scss'] 
}) 
export class PlayerListComponent implements OnInit { 

    public playerList; 

    constructor(private playerListService:PlayerListService) {} 

    ngOnInit() { 
     this.playerList = this.playerListService.playerListData; 
    } 
} 

Answer 1

Проблема заключается в том что ваши данные не извлекаются еще, когда компоненты OnInit работает игровая.

Что вы можете сделать, это вернуть Наблюдаемый из вашего playerListData и подписаться на это Наблюдаемое, чтобы получить фактическое значение.

сервис

public playerListData: Subject<any> = new Subject<any>(); 

constructor(private http:Http) { 
    this.getPlayerData().subscribe(
     data => this.playerListData.next(data) 
    ); 
} 

компонент

В компоненте можно либо просто использовать async трубу в шаблоне

{{ playerListService.playerListData | async }} 

или

ngOnInit() { 
    this.playerListService.playerListData 
     .subscribe(data => this.playerList = data); 
} 

Answer 2

вы получили ошибку здесь вы не выбираете поставщика этой услуги

@Component({ 
selector: 'app-player-list', 
templateUrl: './player-list.component.html', 
styleUrls: ['./player-list.component.scss'], 
providers: [PlayerListService] //<--- add this line on your component 

})