我观察到我订阅了API调用。我有一些方法应该用来响应此API调用,进行一些小的计算,然后将其显示在前端的表中。
即使我使用async await,我的方法也不会等待可观察到的方法解析后再运行。这在四个不同的文件(data.service.ts,dashboard.component.ts,overview.component.ts和overview.component.html)中发生,因为我认为这是最干净的设置。
我所有相关代码:
data.service.ts
async getTotalData(data: Promise<any[]>) {
const myArrayResolved: any[] = await data;
let i: string | number;
let allData: any[] = [];
for (i in myArrayResolved) {
// <- now I do my array stuff
if (myArrayResolved[i].ReturnStatus === 1) {
allData = allData.concat(
myArrayResolved[i].DataList
);
}
}
return allData;
}
dashboard.component.ts
jsonStored = [];
jsonLoaded: Promise<boolean>;
ngOnInit() {
const observables = this.data.map(data =>
this.time.getPunchDataWeek(data.id)
);
forkJoin(observables).subscribe(
results => {
this.jsonStored.push(results);
console.log("Getting JSON from API call...");
this.jsonLoaded = Promise.resolve(true);
},
err => {
console.error(err);
},
() => {//So I know when the response is sent
console.log(
"------------------complete callback has finished----------------------"
);
}
);
}
async getActual(weekDay: string, date: string | number | Date) {
let d = new Date(date);
d = this.time.setStartOfWeek(d);
let i = 1;
let index = 0;
this.weekdays.forEach(element => {
if (weekDay === element) {
index = i;
if (index === 7) {
index = 0;
}
}
i++;
});
let response = await this.time.getTotalData(this.jsonStored[0]);
//Some debugging and just returning 1 as a placeholder
console.log(response);
return 1;
}
overview.component.ts
tableStats() {
for (this.i in this.dash.weekdays) {
this.SHIFTSTATS_DATA.push({
day: this.dash.weekdays[this.i],
requested: 2,
provided: 2,
ontime: 2,
actual: this.dash.getActual(this.dash.weekdays[this.i], new Date())
});
}
return this.SHIFTSTATS_DATA;
}
dataSource = this.tableStats();
overview.component.html
<mat-card>
<table
mat-table
*ngIf="this.dash.jsonLoaded | async; else loading"
[dataSource]="dataSource"
>
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<ng-container matColumnDef="day">
<th mat-header-cell *matHeaderCellDef>Day</th>
<td mat-cell *matCellDef="let shift">{{ shift.day }}</td>
<td mat-footer-cell *matFooterCellDef>Total</td>
</ng-container>
<ng-container matColumnDef="requested">
<th mat-header-cell *matHeaderCellDef>Requested</th>
<td mat-cell *matCellDef="let shift">{{ shift.requested }}</td>
<td mat-footer-cell *matFooterCellDef>{{ getTotalRequested() }}</td>
</ng-container>
<ng-container matColumnDef="provided">
<th mat-header-cell *matHeaderCellDef>Provided</th>
<td mat-cell *matCellDef="let shift">{{ shift.provided }}</td>
<td mat-footer-cell *matFooterCellDef>{{ getTotalProvided() }}</td>
</ng-container>
<ng-container matColumnDef="ontime">
<th mat-header-cell *matHeaderCellDef>On Time</th>
<td mat-cell *matCellDef="let shift">{{ shift.ontime }}</td>
<td mat-footer-cell *matFooterCellDef>{{ getTotalOnTime() }}</td>
</ng-container>
<ng-container matColumnDef="actual">
<th mat-header-cell *matHeaderCellDef>Actual</th>
<td mat-cell *matCellDef="let shift">
{{ shift.actual }}
</td>
<td mat-footer-cell *matFooterCellDef>{{ getTotalActual() }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
<ng-template #loading>Loading Punch Data...</ng-template>
</mat-card>
控制台输出
* ZoneAwarePromise输出大约是6或7次,但我决定将其缩短
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
Getting JSON from API call...
------------------complete callback has finished----------------------