Custom Template
<div class="row" *ngFor="let otc of this.jsonData;index as j">
<div>
<table class="table table-striped table-fixed">
<tr *ngFor="let opc of this.winServiceInfo(j);index as i">
Typescript Code
ngOnInit(): void {
this.geWinService();
}
winServiceInfo(j: number) {
this.winServiceURL = JSON.parse(this.WinService[j].windowsServicesInfo)["Stactuscheck"];
this.dataArrs = [];
this.service.getWinServicesInfo(this.winServiceURL)
.pipe(
catchError(this.handleError)
)
.subscribe(
(data: any) => {
this.setSubscribeData(data);
console.log(this.dataArrs);
return this.dataArrs;
});
console.log(this.dataArrs);
return this.dataArrs;
}
setSubscribeData(data): any {
this.WinService = data.windowsServicesInfo;
this.dataArrs = this.getKeyValJsonObj();
return this.dataArrs;
}
getKeyValJsonObj() {
this.dataArr = [];
for (let key of this.sliceIntoChunks()) {
for (let i in key) {
this.dataArr.push({ 'key': i, 'value': key[i] });
}
}
return this.dataArr;
}
The first console.log(this.dataArrs) in the winServiceInfo method returns Array(3), but the second console.log(this.dataArrs) returns Array(0). This is due to the asynchronous nature of the subscribe operation.
To handle this situation and return Array(3) from the second console.log(this.dataArrs), you can use callback functions or Promises to ensure that the data retrieval is completed before returning the result.