我在嘗試在 Angular 中執行一個棘手的異步請求時遇到了一些問題。我正在顯示一個用戶界面，其中包含濃縮在表格中的特定資訊。該表包含使用模塊http.get提供的方法從后端加載的標頭。HttpClient我在方法中呼叫了這個ngOnInit()方法。有時，在顯示表之前未加載表的標題。如何避免這個問題？
實施的一些資訊：
ngOnInit(): void {
this.toastService.reset();
this.load();
}
load(): void {
const workflows = this.getWorkflows();
const headers = this.getHeaders();
forkJoin([workflows, headers]).subscribe((results) => {
this.setWorkflows(results[0]);
this.setHeaders(results[1]);
}, (error) => {
console.error(`error = ${error}`);
});
}
getWorkflows(): Observable<VisibleWorkflow[]> {
return this.workflowService.getWorkflows().pipe(
map((response) => {
return this.workflows = response;
})
);
}
setWorkflows(workflows: VisibleWorkflow[]): void {
this.workflows = workflows.map((workflow) => {
return {...workflow};
});
}
getHeaders(): Observable<VisibleHeader[]> {
return this.headerService.getHeaders().pipe(
map((response) => {
return this.headers = response;
})
);
}
setHeaders(headers: VisibleHeader[]): void {
this.headers = headers;
}
謝謝你的時間！
uj5u.com熱心網友回復：
您面臨的問題源于您將值分配給this.workflows和this.headers兩次。首先，您在RxJS.map運算子內部分配一個值，然后在訂閱您的forkJoin.
由于forkJoin僅在每個 Observable 完成后才發出值，因此您應該僅在訂閱中分配值，而不是在RxJS.map.
因此，您的代碼將如下所示：
load(): void {
const workflows = this.getWorkflows();
const headers = this.getHeaders();
forkJoin([workflows, headers]).subscribe(
// I used array deconstruction here because I prefer that over hard coded indexes
([wfs, heads]) => {
this.setWorkflows(wfs);
this.setHeaders(heads);
},
(error) => {
console.error(`error = ${error}`);
}
);
}
getWorkflows(): Observable<VisibleWorkflow[]> {
return this.workflowService.getWorkflows();
}
getHeaders(): Observable<VisibleHeader[]> {
return this.headerService.getHeaders();
}
像這樣，您只是在兩個請求都完成后才分配值，因此您應該不再有時間問題。
只要未設定兩個變數，您也可以考慮隱藏您的表格：
<ng-container *ngIf="headers?.length && workflows">
<!-- Your table here -->
</ng-container>
如果存在，這也將解決時間問題；）
uj5u.com熱心網友回復：
您可以使用 combineLatest
combineLatest：每當任何輸入 Observable 發出一個值時，它都會使用來自所有輸入的最新值計算一個公式，然后發出該公式的輸出。https://rxjs.dev/api/index/function/combineLatest
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/417776.html
標籤：
上一篇：HTTP請求未異步發送