全部：
我是Angular 6的新手，一直在学习如何使用表格显示数据。我对静态数据没有任何问题，也就是说，数组中的数据是静态定义的，就像在无处不在的许多示例中一样。自从版本4起，我就感到困惑的是处理从Angular提供的（新）HttpClient返回的数据。
我定义了一个具有5个属性的对象，所有属性都存储在其他服务器上的MySQL表中。该服务器上的PHP脚本返回定义了这些属性的25个JSON对象的数组。
我用来调用此服务的方法是：
table-demo-components.ts
import { Component, OnInit } from '@angular/core';
import { FltdataHttpService } from '../fltdatahttp.service';
// Sorting support
import { ViewChild } from '@angular/core'; // new decorator
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
// Data are supplied by a service
var FLIGHTS = new Array();
@Component({
selector: 'app-table-demo',
templateUrl: './table-demo.component.html',
styleUrls: ['./table-demo.component.css']
})
export class TableDemoComponent implements OnInit {
// specify which columns are to show
displayedColumns: string[] = [
'flightNum',
'destinationCity',
'schedTime',
'actualTime',
'remarks'
]; // NOTE: these are the columns/properties as strings!
// this is how you handle sorted data
flightDataSource = new MatTableDataSource(this.flightDataService.FLIGHTS);
//flightDataSource = new MatTableDataSource(FLIGHTS); // note the difference
dummyNum: number;
// Add decorators for sort and pagination
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit() {
this.flightDataSource.sort = this.sort;
}
// Inject HTTP support - flightDataService - not flightDataSource
constructor(public flightDataService: FltdataHttpService) {
console.log(">>> constructor fired; flightDataService = " + flightDataService);
}
// Support for pagination - note it comes in this and not ngOnInit()
ngAfterViewInit() {
//************************************
// IT MUST BE IN THIS ORDER!
//************************************
// flightDataSource is set here
FLIGHTS = this.flightDataService.getFlightData(); // get the actual data first
console.log(">>> FLIGHTS local = " + FLIGHTS.length);
this.flightDataSource = new MatTableDataSource(FLIGHTS); // then pass it to the source
this.flightDataSource.paginator = this.paginator; // then attached the paginator
this.flightDataSource.sort = this.sort; // and last, the sort option
}
}
在其他地方，我定义了一个服务来调用 http.get 方法：
fltdatahttp.service.ts
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;
}
}
第一个方法getFlightDataLocally（）可以按预期执行–当HTML页面出现时，我看到了五个已定义的对象。
但是当我使用第二种方法 getFlightData（）时，结果表/数组为空。更加令人困惑的是，console.log消息表明触发顺序对我而言并不直观：
控制台输出：
>>> 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
...
我希望getFlightData（）要做的是返回一个数组，其中包含所有25个JSON对象-但它似乎所做的只是什么都不返回，这似乎是某种我无法实现的时序/时序问题缠我的头。 .subscribe的第一个箭头功能中的data变量显然接收数据，但是尝试将其保存到本地变量this.httpData无效。
有人能解释一下如何从Angular脚本成功调用第二台Web服务器，并使返回的数据实际保留而不是消失吗？
我在这里出了什么问题？
谢谢！
答案 0 :(得分：0)
Angular的http.get()和http.post()方法是异步处理的。
因此，当Angular等待get做事时，Angular将继续执行下一行代码而无需等待。
FLIGHTS数组已初始化为空。 get尚未完成api调用，因此数组仍为空。 Angular不会等待get完成，因此Angular返回了空数组。
http.get和http.post返回Observables：一个接口，您可以将回调设置为在http完成时运行。
因此，只要subscribe完成，就会调用您的http.get方法。可能需要300毫秒或4个小时。我们不知道但是，当完成时，将执行回调。这将导致FLIGHTS在当时 填充。
那么，如何使用http.get的结果？
嗯，你在那儿。每当api调用结束时，您已经填写了FltdatahttpService.FLIGHTS。因此，您无需直接返回FLIGHTS，就可以直接使用它。
示例：
<div *ngFor="let flight of FltdatahttpService.FLIGHTS">
<div>{{flight.name}}</div>
</div>
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.
}
}
和消费者：
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);
}
}