数据不会在第一次加载答案

【问题标题】：Data don't load at the first time数据不会在第一次加载
【发布时间】：2019-12-02 03:07:31
【问题描述】：

我正在开发一个带有 Angular 的 Ionic 应用程序。它有一个带有 php 的 API。所以，我有一个返回 JSON 的服务，问题是，它第一次加载页面时，不会从 JSON 加载数据。

服务：

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

@Injectable({
providedIn: 'root'
})
export class PlayerService {

posts;

baseURL: String;

constructor(public http: HttpClient) {
    this.baseURL = 'http://127.0.0.1:8000/'
}

getPlayers() {    
this.http.get(this.baseURL + 'GetPlayers')
  .subscribe(data => {
    this.posts = data;
  });
return this.posts;
}

我如何加载它：

@Component({
  selector: 'app-players',
  templateUrl: './players.page.html',
  styleUrls: ['./players.page.scss'],
})
export class PlayersPage implements OnInit {

constructor(private playerService: PlayerService) { }

players = this.playerService.getPlayers();

ngOnInit() {
 }
}

HTML：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Players</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
 <ion-list>
    <ion-item *ngFor="let p of players">
      <ion-label>
        <h2>{{p.name}}</h2>
        <h3>{{p.mail}}</h3>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

【问题讨论】：

标签： php angular ionic-framework

【解决方案1】：

你应该在你的组件上返回 observable，而不是服务。这将确保在组件初始化时加载数据。

@Component({
  selector: 'app-players',
  templateUrl: './players.page.html',
  styleUrls: ['./players.page.scss'],
})
export class PlayersPage implements OnInit {

  constructor(private playerService: PlayerService) { }

  ngOnInit() {
    this.playerService.getPlayers().subscribe(data => {
      this.players = data;
    });
  }
}

在您的 service.ts 上，进行以下更改。

getPlayers() {    
  return this.http.get(this.baseURL + 'GetPlayers');
}

请尝试了解服务和组件的用途。如 Angular documentation 所述，

理想情况下，组件的工作是实现用户体验和而已。一个组件应该提供属性和方法数据绑定，以便在视图（由模板）和应用程序逻辑（通常包括一些概念模型）。

另一方面，获取和保存数据（执行 HTTP 请求）的职责应该委托给服务。

【讨论】：