Javascript 角度订阅没有按我预期的方式工作

我在这里有点不知所措，试图理解角度订阅的工作流程

我调用API，并在响应中设置行为主题中的数据。这样我就可以在我的应用程序中订阅这些数据了

通常，我会在模板中使用异步管道，因为它更干净，可以为我清除所有订阅数据

所有方法都是同一类方法的一部分

我的第一次尝试

导出数据：行为主体=新的行为主体（[]）

---

对于第一个示例，

console.log（）

的位置以及该方法（在单击按钮时指定）的作用不确定，但是对于第二个示例，您得到的是一个空数组，因为您的observable有一个延迟，TypeScript不会等待其执行完成

您很可能会看到，您将始终在

控制台.log（）

中收到以前的结果（从API更新响应后）

要获得初始结果，您可以更新到以下位置：

public exportReport(collection): void {
  this.exportCollection(collection.id).pipe(take(1)).subscribe(res => {
    const x: any = res;
    console.log(x);
  });
}

---

这将打印您当前的迭代/值。您还忘记了结束侦听订阅（通过取消订阅或执行诸如

take（）

）之类的运算符）。如果不结束侦听，您以后可能会得到意外的结果，或者应用程序可能负载过重。

请确保执行以下步骤

最好在函数中添加

console.log

，并检查值是否出现

打开chrome浏览器的“网络”选项卡，查看服务端点是否命中

检查来自端点的任何响应

如果仍然无法识别，请使用下面的一个来检查您是否得到响应

public exportReport(collection): void { 
  this.http.get(url+"/"+collection.id).subscribe(res=> {console.log(res)});
}

如果需要一个初始/默认值，您可以使用

行为主题

。如果没有，您可以将其替换为

主题

。这就是初始值为空数组的原因，因为默认情况下会调用一次

behavior subject

。但是如果使用

subject

，它将不会在api调用之前被调用，也不会得到初始的空数组

exportedData:behaviorSubject=新的行为主体（[]）

此外，您可能不需要在此处订阅，而是直接返回，这样可以避免使用上述主题

exportApiCall(id) {
 this.loadingSubject.next(true);

 return this.api.getReport(id).pipe(
  catchError((err, caught) => this.errorHandler.errorHandler(err, caught)),
  finalize(() => => this.loadingSubject.next(false))
 );
}

log（x）需要在订阅中，因为订阅是异步的，我们不知道它何时完成。由于您需要这些数据，您可能需要在全局分数中声明

---

在第一个示例中，我不知道您的

控制台的确切位置。log（x）

？它在类方法之外的某个地方？此外，您的按钮有

（单击）=“导出（数据）”

，但没有给出此类方法。方法已更新。控制台。你可以在方法中看到。res被分配给x。然后，我在方法外部控制台x，因为我想获得数据。添加take似乎有帮助。我以前从未用过。现在读了这本书，这是有道理的。谢谢你的帮助。谢谢你的帮助。我尝试过这种方法，并且在导出方法中得到了许多响应。我想现在，我需要把它放在一个管道里（取（1）），这个管道似乎已经控制了它

public exportReport(collection): void { 
  this.http.get(url+"/"+collection.id).subscribe(res=> {console.log(res)});
}

exportApiCall(id) {
 this.loadingSubject.next(true);

 return this.api.getReport(id).pipe(
  catchError((err, caught) => this.errorHandler.errorHandler(err, caught)),
  finalize(() => => this.loadingSubject.next(false))
 );
}

export(collection) {
  // call api
  this.exportApiCall(collection.id).subscribe(exportData => {
    if (exportData) {
      this.x = exportData; // or maybe this.x.push(exportData) ?
      console.log(this.x);
    }
  });
}