如何在訂閱外返回值 Angular

Question

模板

<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

ngOnInit(): void {
    this.geWinService();
  }

  private geWinService() {
    this.service.getWinServicesInfo()
      .pipe(
        catchError(this.handleError)
      )
      .subscribe((data: any) => {
        this.jsonData = data;
        this.WinService = data.map(({ windowsServicesInfo }) => ({ windowsServicesInfo }));
      });
  }

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

sliceIntoChunks() {
    var x = this.WinService;
    var result = Object
      .keys(x)
      .map(k => ({ [k]: x[k] }));
    return result;
  }

在方法 winServiceInfo 上，第一個 console.log(this.dataArrs) 返回 Arrar(3)，但第二個 console.log(this.dataArrs) 返回 Arrar(0)。 我知道訂閱是一個異步操作，因此。

那么如何處理從第二個 console.log(this.dataArrs) 返回 Array(3) 的情況

Answer 1

首先，永遠不要在 HTML 中使用像這樣的 function 調用。

在每次更改檢測時，都會運行 function。 這不僅是一個巨大的性能問題，而且如果您還撥打 HTTP 電話，您可以在幾秒鍾內毀掉某人的數據計划。

其次，盡量避免像你一樣使用this 。 將變量限制在使用它們的 scope 中。

相反，制作一個 observable 來觀察：

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

在你的 HTML

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