我有一個角度應用程式，我正在嘗試獲取影像輪播的一系列來源。我如何設定它目前我有一個“getUrls()”方法來從資料庫中獲取 url，就像這樣
http.service.ts：
getUrls() {
this.http
.get<string[]>(
'<DATABASE_LINK>'
)
.subscribe((imageUrls: string[]) => {
this.carouselService.setUrls(imageUrls);
});
}
該方法呼叫方法“setUrls”將它們設定為存盤在服務中的陣列
carousel.service.ts：
urls: string[] = [];
constructor() {}
setUrls(urls: string[] | []) {
this.urls = urls || [];
debugger;
}
getImages() {
debugger;
return this.urls;
}
然后在輪播組件內部，我在 ngOnInit 中呼叫了前面的兩個方法
影像輪播.component.ts：
ngOnInit(): void {
this.httpService.getUrls();
this.images = this.cService.getImages();
}
然后，這將分配由“setUrls()”方法設定的值，但由于某種原因，它在設定 Urls 之前到達了“getImages()”方法。
我通過將“getImages()”行放入一個單獨的方法并單擊一個按鈕來呼叫它來讓它作業，這樣我就可以確保一切都以正確的順序作業并且它確實如此，但是我希望它完成所有當組件初始化時。
我確信我遺漏了一些東西，所以任何東西都有幫助，即使我必須重構很多。
我嘗試在“getUrls()”方法中使用“.pipe(tap()”而不是訂閱，但是它永遠不會呼叫“setUrls()”方法。
uj5u.com熱心網友回復：
由于getUrls()異步執行其作業，因此您不知道它何時完成并回傳imageUrls。您將不得不稍微重構您的代碼，就像這樣
getUrls():Observable<string[]> {
return this.http
.get<string[]>(
'<DATABASE_LINK>'
);
}
并且您的 ngOnInit 方法將像這樣更新
ngOnInit(): void {
this.httpService.getUrls()
.subscribe((imageUrls:string[])=>
{
this.images = imageUrls;
});
}
uj5u.com熱心網友回復：
服務getUrls()中的函式是一個異步函式。因此，您必須等待它解決。您可以使用 observables 來實作這一點。您只需訂閱getUrls()并將獲取影像函式呼叫放在訂閱塊中。
uj5u.com熱心網友回復：
在getUrls()執行異步任務http.get時，您必須等待異步任務完成才能獲取影像。
因此，一種可能的解決方案可能是，您可以從您的http.service.ts服務中回傳 observable，而在組件內部，ngOnInit您可以在訂閱中獲取影像。
http.service.ts：
getUrls() {
this.http
.get<string[]>(
'<DATABASE_LINK>'
)
.pipe(
map((imageUrls: string[]) => {
this.carouselService.setUrls(imageUrls);
})
);
}
carousel.service.ts：
urls: string[] = [];
constructor() {}
setUrls(urls: string[] | []) {
this.urls = urls || [];
debugger;
}
getImages() {
debugger;
return this.urls;
}
影像輪播.component.ts：
ngOnInit(): void {
this.httpService
.getUrls()
.subscribe(
() => {
this.images = this.cService.getImages();
}
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442539.html
標籤：有角度的 打字稿 firebase-实时数据库 rxjs ngoninit