Angular BehaviorSubject не получает данные из http-вызова - PullRequest
Новая
       14

Angular BehaviorSubject не получает данные из http-вызова

1 голос
/ 24 апреля 2020

Я пытаюсь работать с поведениями субъекта, чтобы получить имя пользователя из БД с помощью вызова HTTP. Когда пользователь входит в процесс должен быть инициализирован. И затем, когда имя пользователя изменится, я хочу отобразить это без перезагрузки моей страницы, чтобы получить обновленное значение. Я новичок в концепции и использовании BehaviorSubject, так что это то, что я до сих пор. Я создал Authservice, который принимает isAuthenticated $ (boolean), наблюдаемый из Auth0Service (я использую auth0 для аутентификации) и проверяет, вошел ли пользователь в систему. Когда пользователь входит в систему, он запускает мою функцию getLoggedInUser, которая содержит вызов http для получения данные. Но когда я хочу отобразить имя в sidenav, то оно равно null, что является начальным значением поведенияSubject. Так что я догадываюсь, что никогда не буду вызывать данные.

AuthService: 

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private api: ApiService, private auth0Service: Auth0Service ) { 
    this.auth0Service.isAuthenticated$.pipe(tap(isAuth => {
      if (isAuth) {
       this.getLoggedInUser()
        console.log(isAuth)
      }
    }));


   }

  private userSubject$ = new BehaviorSubject<any>(null);
  user$ = this.userSubject$.asObservable();

  getLoggedInUser(): Observable<any> {
    return this.api.getCurrentLoggedInUser().pipe(tap(user=> this.userSubject$.next(user)));

  }


}

sidenav, где я вызываю пользователя $: 

export class SidenavComponent implements OnInit {
 constructor(private authService: AuthService) {}

 getUser$ : Observable<User>;
 ngOnInit(): void {

    this.getUser$ =  this.authService.user$

 }

компонент приложения, где я сначала инициализируйте 

export class AppComponent implements OnInit {
 constructor(public auth0Service: Auth0Service, private authService: AuthService) {}
 ngOnInit(): void {
    this.authService.user$;
 }
}

sidenav html: 

   <div *ngIf="getUser$  | async as profile">
          <h3>{{profile.name}}</h3>
   </div>

Может ли кто-нибудь помочь мне понять, почему я не получаю никаких данных?

ОБНОВЛЕНИЕ:

Мне удалось проверить, что я сначала даже не попал в функцию getLoggedInUSer, но теперь я переместил вызов this.getLoggedInUser () в свой authguard, и теперь я могу успешно зарегистрировать логический логин как true в моем getLoggedInUser ( ). Теперь я попытался зарегистрировать userSubject $ внутри getLoggedInUser () после вызова API, и я удалил return перед вызовом. Я получаю это в консоли: 

BehaviorSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
value: (...)
_isScalar: false
observers: [Subscriber]
closed: false
isStopped: false
hasError: false
thrownError: null
_value: null
__proto__: Subject

Кажется, пустая ведьма странна, потому что я зарегистрировал это после вызова API

1 Ответ

0 голосов
/ 24 апреля 2020

Ваш сервис не должен вызывать метод в конструкторе this.auth0Service.isAuthenticated$.. Эти методы должны быть разделены: 

import { HttpClient } from '@angular/common/http';
import {Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class AuthService {
    constructor(private api: ApiService, 
        private auth0Service: Auth0Service ) {}


    this.auth0Service.isAuthenticated$
        .pipe(map(v => v));


    getLoggedInUser(): Observable<any> {
        return this.api.getCurrentLoggedInUser()
            .pipe(map(v => v));
    }
}

И ваш компонент может получать данные из вышеуказанного сервиса, используя ключевые слова async и await.

your.component.ts : 

user: any;
async ngOnInit() {
    let isAuthenticated = this.authService.isAuthenticated.toPromise();
    if (isAuthenticated) {
        this.user = this.authService.getLoggedInUser().toPromise();          
        console.log(this.user);
    }
}

HTML: 

<div *ngIf="user">
     <h3>{{user | json}}</h3>
</div>

ОБНОВЛЕНИЕ:

Вы можете использовать Observable для получения недавно обновленного пользователя: 

user: any;  

ngOnInit() {
    this.authService.isAuthenticated.pipe(
        tap(val => console.log(val)),
        switchMap(val => this.authService.getLoggedInUser())
        ).subscribe(user => {
            this.user = user;
        });
}
...