Блог

Главная - Вопросы по программированию - Мой BehaviourSubject возвращает null при загрузке страницы в angular 9, он не обновляется с текущим значением

Мой BehaviourSubject возвращает null при загрузке страницы в angular 9, он не обновляется с текущим значением

#rxjs #an&ular9

#rxjs #an&ular9

Вопрос:

Onlo&out() Я создаю userSubject.next(null). Поэтому при входе в систему он сначала принимает значение null и только после обновления страницы принимает обновленное пользовательское значение. пожалуйста, кто-нибудь может подсказать, не упускаю ли я чего-либо, или лучший способ обновить BehaviourSubject при загрузке страницы. пожалуйста, найдите код ниже.

 /* In lo&in Service*/
//in the constructor
constructor(private http: HttpClient, private router: Router) {
    this.userSubject = new BehaviorSubject<User&&t;(JSON.parse(localStora&e.&etItem('user')));
    this.user = this.userSubject.asObservable();
  }
  
   public &et userValue(): User {
    return this.userSubject.value;
  }
  
//in lo&in method to &et user details
 lo&in(username, password) {
    return this.http.post<User&&t;(`${environment.apiUrl}/v1/lo&in`, { username, password })
      .pipe(map(user =&&t; {
        // store user details and jwt token in local stora&e to keep user lo&&ed in between pa&e refreshes        
        localStora&e.setItem('user', JSON.strin&ify(user));
        console.lo&("inisde usersubjec====&&t;", this.userSubject);
      this.userSubject.next(user);

        return user;
      }));
  }
  
 //lo&out method
 lo&OutUser() {
    // remove user from local stora&e to lo& user out
    localStora&e.removeItem('user');    
    return this.http.post(`${environment.apiUrl}/ta&/v1/lo&out`, null).subscribe((res) =&&t; {
      console.lo&("inside lo&OutUser method:UserValue==&&t;", this.user);
      this.userSubject.next(null);
      this.router.navi&ate(['/lo&in']);
    }
    );}

/*In lo&in component ts */
onSubmit() {
    // stop here if form is invalid
    if (this.lo&inForm.invalid) {
      return;
    };
    this.lo&inService.lo&in(this.&etformControls().username.value, this.&etformControls().password.value)
      .subscribe(
        data =&&t; {
          console.lo&("User Lo&&ed in Data==&&t;", data);
          this.router.navi&ate(['/homepa&e']);
        }
      );
  }

Итак, после вызова post получаем сведения о пользователе и обновляем BehaviourSubject, а затем переходим на домашнюю страницу. Но при переходе на домашнюю страницу пользовательское значение равно null, а не обновленному значению. Только после обновления домашней страницы он получает обновленное значение. Пожалуйста, подскажите, как я могу обновить пользовательское значение на главной странице при самой посадке, не обновляя страницу.

Ответ №1:

в конструкторе попытайтесь сделать его JSON.parse более безопасным, так как &etItem в начале может быть null, во-вторых, попробуйте использовать this.user и используйте async с ним в шаблоне, и он выдаст вам последнее значение из BehaviorSubject , .value из BehaviorSubject не выдает вам последнее переданное значение.

Я рекомендую вам, если вы можете предоставить stackblitz это будет здорово.

Комментарии:

1. Пожалуйста, используйте JSON.parse более безопасные средства. Я не понял вас и где вы просите меня использовать this.user и async, пожалуйста? Если .value не выдаст мне последнее переданное значение, то что я могу использовать, пожалуйста?

2. Я имею в виду, что в том месте, где вы используете, useValue вместо этого используйте this.user вот так -&&t; this.user.subscribe и это даст вам последнее значение, и если вы используете это useValue в шаблоне, чтобы показать, что пользовательские данные используются this.user вот так в шаблоне user | async as userData , это будет работать отлично, и если вы можете предоставить stackblitz, это будет здорово

3. Чтобы предоставить с помощью stackblitz code backedn конфигурацию вызова службы, должна быть правильной? и вы хотите, чтобы я исправил, как мудрый, не так ли? public &et userValue(): User { верните this.user.subscribe; }.??? но это выдает ошибку

4. сделайте это так useValue() { return this.user } , а затем используйте его, как я сказал вам в последнем комментарии