[英]Angular fetch JSON Object from API and store it in variable, check if existing
I'am working on an Angular Project and I have a Problem which I didn't mange to solve... 我正在研究Angular项目,我遇到了一个问题,我没有解决这个问题......
//part of class Data
constructor(private fetchData: FetchData) {
this.subscription = timer(0, 1000000).pipe(
switchMap(() => this.fetchData.getData())
).subscribe((result) => this.data = result);
}
private data: any;
private subscription: Subscription;
public getData(): Object {
return this.data.data_property;
}
It reports errors because of a runtime condition and I want to solve this Problem by waiting for the variable to be filled. 它因运行时条件而报告错误,我想通过等待填充变量来解决此问题。 The whole app needs it, so it is pretty important.
整个应用程序需要它,所以它非常重要。 I want to solve it with an Observable from Angulars rxjs but I didn't really got it to work, I'am pretty new to this.
我想用Angulars rxjs中的Observable来解决这个问题,但我并没有真正开始工作,我对此非常陌生。 By the way, both, the FetchData and the Data Class are @Injectable Services.
顺便说一下,FetchData和Data Class都是@Injectable Services。
If somebody has an additional Tip for me to convert the variable data to a type of Interface eg "myData" I would be very happy, too, because I don't want to use the hack with any. 如果有人有一个额外的提示让我将变量数据转换为一种类型的接口,例如“myData”,我也会非常高兴,因为我不想使用任何黑客。 Problem is the getData of FetchData returns just an Object from HttpClient:
问题是FetchData的getData只返回来自HttpClient的Object:
//part of class FetchData
getData() {
return this.http.get(this.dataUrl)
.pipe(
catchError(this.handleError)
);
}
Tanks for helping anyways. 无论如何帮助坦克。 Love Stackoverflow community :D
爱Stackoverflow社区:D
Main problem 主要问题
app_initializer
can be used Angular: How to correctly implement APP_INITIALIZER app_initializer
Angular:如何正确实现APP_INITIALIZER this.data
should be used instead of class Data
itself this.data
而不是类Data
本身 public getData(): Object {
return this.data.data_property;
}
Response type 响应类型
Http methods let you provide a generic, like this this.http.get<CustomResponseInterface>()
Http方法让你提供一个泛型,比如
this.http.get<CustomResponseInterface>()
One of the approaches could be the following - 其中一种方法可能如下 -
Have your data service setup like this - 您的数据服务设置如下 -
export class DataService {
//This is
private _data$: BehaviorSubject<any> = new BehaviorSubject<any>(null);
data$: Observable<any>;
constructor(private fetchData: FetchData) {
this.data$ = this._data$.pipe(filter(d => !!d));
this.getData();
}
getData() {
timer(0, 1000000).pipe(
switchMap(() => this.fetchData.getData()),
tap(d => {
this._data$.next(d);
})
).subscribe();
}
}
Now to make use of the DataService.data$ do the following in the component [In this example I am assuming it is HomeComponent] where you want to use the fetched data [you can use data$ observable in as many component/services as you want, it will emit last fetched data from the backend] - 现在要使用DataService.data $在组件中执行以下操作[在此示例中我假设它是HomeComponent]您要使用获取的数据[您可以在尽可能多的组件/服务中使用数据$ observable想要,它将从后端发出最后获取的数据] -
export class HomeComponent implements OnInit {
constructor(private dataService: DataService) { }
data$: Observable<any>;
ngOnInit() {
this.data$ = this.dataService.data$;
}
}
in html of HomeComponent 在HomeComponent的html中
<div *ngIf="data$ | async as data">
<!-- Render your 'data' -->
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.