Подписка на Observer с последующим выводом ответа на консоль возвращает undefined - PullRequest
Новая
       34

Подписка на Observer с последующим выводом ответа на консоль возвращает undefined

0 голосов
/ 31 марта 2020

Когда я подписываюсь на конечную точку API, предоставляемую службой в Angular компоненте, я не могу получить доступ к значению из наблюдаемого в моем машинописном коде, однако я могу видеть их в 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 после того, как я на него подписался?

Спасибо

Ответы [ 3 ]

1 голос
/ 31 марта 2020

Вызовите console.log внутри функции подписчика. 

roles: Role[];

ngOnInit(): void {

  this.roleService.getAllRoles().subscribe(data => {
    this.roles = data
    console.log(this.roles);
  });
}
1 голос
/ 31 марта 2020

Подписка - это контракт между Observable и Observer. Как указано в документации: «Подписка на Observable похожа на вызов функции, которая доставляет обратные вызовы, в которые доставляются данные. [...] Выполнение выдает несколько значений во времени, синхронно или асинхронно. Существует три типа значений: Наблюдаемое выполнение может доставить:

  • «Следующее» уведомление: отправляет значение, такое как Число, Строка, Объект и т. Д. c.
  • Уведомление «Ошибка»: отправляет a 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);
        }
      })

Загляните сюда:

И, возможно, посмотрите это видео:

1 голос
/ 31 марта 2020

Это потому, что Subscriptions - это асинхронный код. Поэтому console.log выполняется до того, как ваш обработчик скопирует данные. Если вы поместите console.log в подписку, это будет работать.

Если вы хотите получить доступ позже, вы можете сделать что-то вроде 

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

И иметь dataFunction() внутри доступ к компоненту this.data после того, как он будет определен к тому времени.

...