Как получить доступ к значению из ответа angular - PullRequest
Новая
       3

Как получить доступ к значению из ответа angular

1 голос
/ 01 февраля 2020

Как мне сопоставить часть user_id моего ответа с переменной user_id? Мой ответ: {"token":"1a68322c4cad219c94d9554e30e4c8a00339e428","user_id":23,"username":"test5","first_name":"test5","email":"test5@test5.com"}

Я могу получить первый console.log(this.user_id), чтобы показать user_id, но второй не работает. Я хочу использовать его, чтобы перенаправить меня на другую страницу .. 

  login(user){ 
    this.userApiService.login({'username': this.user.username, 'password': this.user.password}).subscribe( resp => {
      let response = resp;
      this.user_id = response.user_id
      console.log(this.user_id)
      });
      console.log(this.user_id)
      this.router.navigateByUrl('/dashboard/'+this.user_id)
  }

Ответы [ 4 ]

3 голосов
/ 01 февраля 2020

Проблема в том, что код для второй console.log и навигация вашего маршрутизатора находятся вне блока подписки. Вам нужно переместить свою маршрутизацию вверх по subscribe, например: 

login(user){ 
    this.userApiService.login({'username': this.user.username, 'password': this.user.password}).subscribe( resp => {
      let response = resp;
      this.user_id = response.user_id;
      console.log(this.user_id);
      this.router.navigateByUrl('/dashboard/'+this.user_id);
    });
  }

Причина, по которой ваш исходный код не работает, заключается в том, что код внутри вашей подписки будет работать асинхронно, то есть произойдет после того, как ваш API вернулся с ответом. В исходном коде происходит следующее:

  1. Вызывается userApiService и отправляет запрос http на ваш сервер.
  2. Код после запуска блока подписки означает, что ваш второй console.log и роутер навигации. На данный момент вызов http не возвращен с user_id, поэтому код не знает, что такое user_id.
  3. Ответ от вашего запроса http возвращается, и код внутри вашего блока подписки теперь запустить. Теперь у вас есть доступ к user_id.
3 голосов
/ 01 февраля 2020

this.userApiService.login асинхронно, поэтому вы не знаете, когда выполняется this.user_id = response.user_id. Вы должны использовать this.router.navigateByUrl внутри подписки.

0 голосов
/ 01 февраля 2020

Потому что метод userApiService.login возвращает наблюдаемый объект.

Что является наблюдаемым?

Наблюдаемым является:

Наблюдаемые обеспечивают поддержку передачи сообщений между издателями и подписчиками в вашем приложении. Observables предлагают значительные преимущества по сравнению с другими методами обработки событий, асинхронного программирования и обработки нескольких значений. Для получения дополнительной информации, пожалуйста, перейдите по этой ссылке: Angular Observables

в двух словах: тип возврата userApiService.login является наблюдаемым, поэтому он работает асинхронно c, поэтому ваш код не правильно работает. Пожалуйста, под частью кода переместите подписку внутрь. 

console.log(this.user_id)
this.router.navigateByUrl('/dashboard/'+this.user_id)

Например: 

login(user){ 
    this.userApiService.login({'username': this.user.username, 'password': this.user.password}).subscribe( resp => {
      let response = resp;
      this.user_id = response.user_id
      console.log(this.user_id)

      //it is correct 
      console.log(this.user_id)
      this.router.navigateByUrl('/dashboard/'+this.user_id)
      });
  }
0 голосов
/ 01 февраля 2020

Так происходит, потому что он перемещается на панель мониторинга еще до того, как вы получите ответ. Он не ждет, пока придет ответ. Держите .navigateByUrl () внутри .subscribe (). Таким образом, он будет перемещаться после получения ответа

...