订阅 Observer 然后将响应输出到控制台 returns undefined

Question

当我订阅 Angular 组件中的服务提供的 API 端点时，我无法从我的打字稿代码中的可观察对象访问值，但是我可以在 HTML.

role.service.ts

getAllRoles() {
    return this.http.get<Role[]>(`${environment.privateApiUrl}/Role/Get`);
}

app-component.component.ts

  roles: Role[];

  ngOnInit(): void {

    this.roleService.getAllRoles().subscribe(data => {
      this.roles = data
    })

    console.log(this.roles) <-- Returns undefined
  }

但是，如果我在 HTML 中调用角色，我可以看到所有值。如果我在订阅内调用 console.log，我可以看到这些值。

订阅后如何在 Typescript 中访问该对象？

谢谢

Answer 1

那是因为Subscriptions是异步代码。因此 console.log 在您的处理程序复制数据之前执行。如果您将 console.log 放入订阅中，它将起作用。

如果您想稍后访问，您可以执行类似

的操作

observable.subscribe(data => {
  this.data = data
  this.dataFunction()
})

并在组件中访问 this.data 之后的 dataFunction() 因为它将在那时定义。

Answer 2

在订阅者函数中调用 console.log。

roles: Role[];

ngOnInit(): void {

  this.roleService.getAllRoles().subscribe(data => {
    this.roles = data
    console.log(this.roles);
  });
}

Answer 3

订阅是 Observable 和 Observer 之间的契约。正如文档所述：“订阅一个 Observable 就像调用一个函数，该函数传递数据传递到的回调。[...] 随着时间的推移，执行会同步或异步地产生多个值。值分为三种类型Observable Execution 可以交付：

"Next" 通知：发送一个值，例如一个数字，一个字符串，一个对象等
"Error" 通知：发送 JavaScript 错误或异常。
"Complete" 通知：不发送值。"

订阅可以如下所示：

// get something
this.http.get<any[]>(`${AppConfig.settings.whatever}`).subscribe({
        next: (res: Array<any>) => {
          this.bucket = res;
          console.log('Response object: ', res);
        },
        error: (err: HttpErrorResponse) => { console.error('An error in getSomething occured', err.type) },
        complete: () => { 
          console.log('getSomething completed!');
          this.someService.setResponseObject(this.bucket);
          window.scrollTo(0, 0);
        }
      })

看看这里：

https://rxjs-dev.firebaseapp.com/guide/observable#anatomy-of-an-observable

或许还可以观看此视频：

https://academind.com/learn/javascript/understanding-rxjs/obervables-observers-subscriptions/

订阅 Observer 然后将响应输出到控制台 returns undefined

Subscribing to Observer then outputting the response to console returns undefined

typescript

angular2-observables

angular