Can'；在Angular 6中，似乎没有保存调用http.get（）方法返回的数据

全部：

我是Angular 6的新手，一直在学习如何使用表格显示数据。我对静态数据没有任何问题，也就是说，数组中的数据是静态定义的，就像在许多例子中一样，这些例子似乎到处都是在线的。我感到困惑的是如何处理Angular自版本4以来提供的（新）HttpClient返回的数据

我定义了一个具有5个属性的对象，所有属性都存储在不同服务器上的MySQL表中。该服务器上的PHP脚本返回一个包含25个JSON对象的数组，其中定义了这些属性

我用来调用此服务的方法是：

表-demo-components.ts

在其他地方，我定义了一个服务来调用http.get方法：

fltdatahttp.service.ts

我期望getFlightData（）返回一个包含所有25个JSON对象的数组——但它似乎什么也不返回，而且似乎是某种顺序/时间问题，我无法理解。.subscribe的第一个箭头函数中的数据变量显然接收到数据，但尝试将其保存为局部变量this.httpData无效

有人能解释一下，是什么使我们能够成功地从Angular脚本调用第二个web服务器，并使返回的任何数据实际上保留下来而不是消失

我这里出了什么问题

谢谢

Angular的

http.get（）

和

http.post（）

方法异步处理

因此，当Angular正在等待

get

完成它的任务时，Angular将继续执行下一行代码而不等待

FLIGHTS

数组已初始化为空。

get

尚未完成api调用，因此数组仍然为空。Angular不会等待

get

完成，因此Angular返回了空数组

http.get

和

http.post

返回

observeables

：一个接口，允许您设置在

http

完成时运行回调

因此，只要

http.get

完成，就会调用

subscribe

方法。它可能在300毫秒或4小时内完成。我们不知道。但是当它完成时，回调被执行。这将导致此时填充

航班

那么，如何使用http.get的结果呢？

好吧，你已经走到一半了。只要api调用完成，您就已经填充了

FltdatahttpService.FLIGHTS

。因此，您可以直接使用它，而不是返回

航班

例如：


{{flight.name}

Angular足够聪明，可以知道何时
FltdatahttpService.FLIGHTS
发生了更改，并将相应地更新DOM

但是，在处理组件中的结果时，最好直接从服务返回订阅。然后你可以让任何你喜欢的消费者做任何它需要的额外处理

export class FltdataHttpService {

    constructor(public http: HttpClient) { 
      private http: HttpClient
    }

    public getFlightData(): Observable<Array<FlightInfo> {

        //Angular can auto-deserialize JSON into objects for you
        return this.http.get<Array<FlightInfo>>(
            "http://localhost/flights.php",
            { responseType: 'application/json' });

        //returning the raw Observable.
        //The consumer can get a copy of the results by adding a subscription.
        //Thus, each consumer can do any extra processing required.
    }
}

导出类FltdataHttpService{
构造函数（公共http:HttpClient）{
私有http:HttpClient
}
public getFlightData（）：可观察
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { FlightInfo } from './table-demo/flight-info';

var newFlight;

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

  public httpData: any;                  

  public FLIGHTS: FlightInfo[] = [];

  constructor(public http: HttpClient) { 
    //this.getFlightData();
  }

  public getFlightDataLocally(): FlightInfo[]  {

    console.log(">>> getFlightDataLocally() fired");

    this.FLIGHTS = [
      {flightNum: '145', destinationCity: 'Chicago Midway', schedTime: '17:35', actualTime: 'ON TIME', remarks: 'AMBASSADOR SERVICE'},
      {flightNum: '365', destinationCity: 'Toronto Pearson', schedTime: '17:46', actualTime: 'ON TIME', remarks: 'NON-STOP'},
      {flightNum: '277', destinationCity: 'Montreal Trudeau', schedTime: '17:51', actualTime: 'ON TIME', remarks: 'NON-STOP'},
      {flightNum: '980', destinationCity: 'New York LaGuardia', schedTime: '17:58', actualTime: 'ON TIME', remarks: 'AMBASSADOR SERVICE'},
      {flightNum: '671', destinationCity: 'Los Angeles Intl', schedTime: '18:02', actualTime: 'ON TIME', remarks: 'VIA PHOENIX'},
    ];

    return this.FLIGHTS;

  }

  public getFlightData(): FlightInfo[] {                // timing issue? web lag?

    console.log(">>> getFlightData(): ");

    this.http.get("http://localhost/flights.php", { responseType: 'text' }).subscribe(data => {

      this.httpData = JSON.parse(data);
      console.log(">>> resp = " + data.toString());

      for (var f = 0; f < this.httpData.flights.length; f++) {

        console.log(">>> creating element - " + this.httpData.flights[f].flightNum);

        newFlight = new FlightInfo();
        newFlight.flightNum = this.httpData.flights[f].flightNum; 
        newFlight.destinationCity = this.httpData.flights[f].destinationCity;
        newFlight.schedTime = this.httpData.flights[f].schedTime;
        newFlight.actualTime = this.httpData.flights[f].actualTime;
        newFlight.remarks = this.httpData.flights[f].remarks;

        this.FLIGHTS.push(newFlight);
      }

    });

    // A static array assigning a series of new FlightInfo objects here can be seen
    // by Angular Material, outside the .subscribe() method above. Inside, the same
    // for loop causes NOTHING to happen to the this.FLIGHTS array.

    return this.FLIGHTS;

  }

}

>>> getFlightData():                 table-demo.component.ts:58 
>>> FLIGHTS local = 0                fltdatahttp.service.ts:59 
>>> resp = { "flights" : [
{
   "flightNum" : "345",
   "destinationCity" : "CHICAGO MIDWAY",
   "schedTime" : "09:30",
   "actualTime" : "ON TIME",
   "remarks" : "AMBASSADOR SERVICE"
},
{
   "flightNum" : "712",
   "destinationCity" : "MILWAUKEE",
   "schedTime" : "09:44",
   "actualTime" : "ON TIME",
   "remarks" : "AMBASSADOR SERVICE"
},
{
   "flightNum" : "910",
   "destinationCity" : "CHAMPAIGN/URBANA",
   "schedTime" : "09:56",
   "actualTime" : "ON TIME",
   "remarks" : "AMBASSADOR SERVICE"
},
{
   "flightNum" : "118",
   "destinationCity" : "HOUSTON HOBBY",
   "schedTime" : "10:00",
   "actualTime" : "ON TIME",
   "remarks" : "AMBASSADOR SERVICE"
},
{
   "flightNum" : "627",
   "destinationCity" : "MIAMI",
   "schedTime" : "10:03",
   "actualTime" : "ON TIME",
   "remarks" : "NONSTOP"
},
...
...
}
]} fltdatahttp.service.ts:63 
>>> creating element - 345
    fltdatahttp.service.ts:63 
>>> creating element - 712 
   fltdatahttp.service.ts:63 
>>> creating element - 910 
   fltdatahttp.service.ts:63 
>>> creating element - 118 
   fltdatahttp.service.ts:63 
>>> creating element - 627 
   fltdatahttp.service.ts:63 
...

export class FltdataHttpService {

    constructor(public http: HttpClient) { 
      private http: HttpClient
    }

    public getFlightData(): Observable<Array<FlightInfo> {

        //Angular can auto-deserialize JSON into objects for you
        return this.http.get<Array<FlightInfo>>(
            "http://localhost/flights.php",
            { responseType: 'application/json' });

        //returning the raw Observable.
        //The consumer can get a copy of the results by adding a subscription.
        //Thus, each consumer can do any extra processing required.
    }
}

export class TableDemoComponent implements OnInit {

    //FLIGHTS won't be filled until the service call finishes.
    public flightDataSource = new MatTableDataSource(new Array<FlightData>());

    @ViewChild(MatSort) sort: MatSort;
    @ViewChild(MatPaginator) paginator: MatPaginator;

    ngOnInit() {
        //Init stuff here
    }

    constructor(
      public flightDataService: FltdataHttpService
    ) { }

    ngAfterViewInit() {
        //Start the service call.
        //Do stuff when it finishes.

        this.flightDataService.getFlightData()
            .subscribe(
               flightData => this.onFlightDataChanged(flightData),
               error => this.onError(error)
             );
    }

    private onFlightDataChanged(flightData: Array<FlightData>): void {
        //the service call has finished.
        //Recreating the table using the fresh data from the service

        this.flightDataSource = new MatTableDataSource(flightData);
        this.flightDataSource.paginator = this.paginator;
        this.flightDataSource.sort = this.sort;
    }

    private onError(error: any): void {
        //something broke.
        console.log(error);
    }
}