How to return value outside subscribe Angular-CodePudding

Template

<div  *ngFor="let otc of this.jsonData;index as j">
        <div>
            <table >
             
    <tr *ngFor="let opc of this.winServiceInfo(j);index as i">

Typescript

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;
  }

On method winServiceInfo first console.log(this.dataArrs) retuens Arrar(3) but the second console.log(this.dataArrs) returns Arrar(0). I understand that subscribe is an asynchronous operation and for that reason.

So how to handle the situation to return the Array(3) from second console.log(this.dataArrs)

CodePudding user response：

First off, NEVER use a function call like this in HTML.

At every change detection, the function will be ran. Not only this is a huge performance issue, but if you also make HTTP calls, you can ruin someone's data plan in seconds.

Second, try to avoid using this like you do. Constrain your variables to the scope of where they're used.

Instead, make an observable to observe :


data$ = forkJoin(
  this.jsonData.map(j => {
    const winServiceURL = JSON
      .parse(this.WinService[j].windowsServicesInfo)["Stactuscheck"];

    return this.service.getWinServicesInfo(this.winServiceURL);
  }).pipe(
    switchMap(data => {
      const WinService = data.windowsServicesInfo;
      const dataArr = [];
      for (let key of this.sliceIntoChunks()) {
        for (let i in key) {
          dataArr.push({ 'key': i, 'value': key[i] });
        }
      }
      return dataArr;
    })
  )
)

In your HTML

<div  *ngFor="let opc of data$ | async">
  {{ opc | json }}
</div>