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运行时，你的数据还没有被提取。

您可以做的是返回import matplotlib import matplotlib.pyplot as plt的Observable并订阅该Observable以获取实际值。

<强>服务

playerListData

<强>组件

在您的组件中，您可以只使用模板中的public playerListData: Subject<any> = new Subject<any>(); constructor(private http:Http) { this.getPlayerData().subscribe( data => this.playerListData.next(data) ); }管道

async

或

{{ playerListService.playerListData | async }}

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

}）

Angular 2服务数据绑定

2 个答案: