时间戳

首页 > 解决方案 > 打字稿订阅从 API 收集数据并将其写入数组，但我只能输出其中一个

angular - 打字稿订阅从 API 收集数据并将其写入数组，但我只能输出其中一个

问题描述

我从这样的 API 获取数据：

ngAfterViewInit() {
  this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
  var href = '/schuhe-store/status';

  if (environment.production === false) {
    href = 'https://sales.dailysshop.com/schuhe-store/status';
  }

  for (var val of this.dataArray) {
    const requestUrl = `${href}?type=${val}`;

    this._httpClient
      .get<StatusInterface>(requestUrl)
      .pipe(
        map((data) => {
          return data;
        })
      )
      .subscribe(
        (data) => {
          this.dataResults[val] = data;
          console.log(this.dataResults[val]);
        },
        (error) => {
          const dialogConfig = new MatDialogConfig();

          if (error.status == 404) {
            dialogConfig.disableClose = true;
            dialogConfig.autoFocus = true;
            console.log(error.errno);
            this.dialog.open(DialogOverviewExampleDialog, dialogConfig);
          } else if ((error.status = 200)) {
            this.dialog.open(DialogOverviewExampleDialog, dialogConfig);
          }
          this.routeNotRegistered = true;
        }
      );
  }
}

在我的 HTML 中，我输出 4 行如下：

            <mat-list-item>
                <mat-icon mat-list-icon>done</mat-icon>
                <div mat-line>Cronjob</div>
                <div mat-line *ngIf='getTimestamp("cron"); else loading;'>Zuletzt beendet: {{ getTimestamp("cron") | date:'dd.MM.yyyy HH:mm" }} Uhr</div>
            </mat-list-item>
            <mat-list-item>
                <mat-icon mat-list-icon>done</mat-icon>
                <div mat-line>Exportprozess</div>
                <div mat-line *ngIf='getTimestamp("export"); else loading;'>Zuletzt beendet: {{ getTimestamp("export") | date:"dd.MM.yyyy HH:mm" }} Uhr</div>
            </mat-list-item>
            <mat-list-item>
                <mat-icon mat-list-icon>done</mat-icon>
                <div mat-line>Deltaexport</div>
                <div mat-line *ngIf='getTimestamp("delta"); else loading;'>Zuletzt beendet: {{ getTimestamp("delta") | date:"dd.MM.yyyy HH:mm" }} Uhr</div>
            </mat-list-item>
            <mat-list-item>
                <mat-icon mat-list-icon>error</mat-icon>
                <div mat-line>Importprozess</div>
                <div mat-line *ngIf='getTimestamp("import"); else loading;'>Zuletzt beendet: {{ getTimestamp("import") | date:"dd.MM.yyyy HH:mm" }} Uhr</div>
            </mat-list-item>

getTimestamp 是以下代码：

    getTimestamp(key: string):number|undefined{
        if (this.dataResults[key] && this.dataResults[key]["timestamp"] !== undefined)
            return (this.dataResults[key]["timestamp"]);
        return (undefined);
    }

在我的 HTML 中，只输出一个值，目前，只有 getTimestamp("delta") 并且我不知道如何获取所有 4 个值。

有人可以指出这一点并提供解决方案吗？

亲切的问候亨宁

标签： angulartypescriptrxjs

解决方案

您可以使用RxJS forkJoinsubscribe组合所有子可观察对象（HTTP 调用），而不是直接订阅它们，并在所有子可观察对象完成后通过方法发出结果。

尝试以下操作：

ngAfterViewInit() {
  this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
  var href = '/schuhe-store/status';

  if (environment.production === false) {
    href = 'https://sales.dailysshop.com/schuhe-store/status';
  }

  if (!this.dataArray?.length) return;

  forkJoin(
    this.dataArray.map((val) => {
      const requestUrl = `${href}?type=${val}`;
      return this._httpClient.get<StatusInterface>(requestUrl).pipe(
        tap((data) => {
          this.dataResults[val] = data;
        })
      );
    })
  ).subscribe(
    () => {
      console.log('DONE!');
    },
    (error) => {
      const dialogConfig = new MatDialogConfig();

      if (error.status == 404) {
        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;
        console.log(error.errno);
        this.dialog.open(DialogOverviewExampleDialog, dialogConfig);
      } else if ((error.status = 200)) {
        this.dialog.open(DialogOverviewExampleDialog, dialogConfig);
      }
      this.routeNotRegistered = true;
    }
  );
}

推荐阅读