angular - 当从 api 响应分配数据时,BehaviorSubject 没有更新

标签 angular http asynchronous behaviorsubject

我有用户数据服务。数据服务的目的是广播用户数据并在不同组件之间共享数据。如果一个组件对用户进行了更改,则其他组件应该知道这一点。它在其他组件中运行良好。例如,我在 Location 组件中更新用户的位置,并且它随处可用。我有登录组件,我在其中将用户凭据发送到 API 并接收用户数据。我将接收到的数据分配给我的广播用户对象,但它没有反射(reflect)在我的结帐组件中。

user-data.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import {User} from '../entities/user';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserDataService {
  private _user: BehaviorSubject<User>;
  broadCastUser: Observable<User>;

  constructor() {
    this._user = new BehaviorSubject<User>(new User());
    this.broadCastUser = this._user.asObservable();
  }

  updateUser (newUser) {
    this._user.next(newUser);
  }
}

sign-in.component.ts

// removing unnecessary code
private _user: User;
ngOnInit() {

    // Getting user info so far
    this._userDataService.broadCastUser.subscribe(user => this._user = user);
}


signin () {
    const body = {
      UserId : this.emailAddress.value,
      Password : this.password.value
    };

    this._spinner.show();

    this._signInService.signIn(body).subscribe(
      (user) => {
        this._spinner.hide();

        // Handling error because API response is 200 Ok. Wrong API implementation.
        const userId = user[0].UserId;
        if (userId === 0) {
          this._isPasswordWrong = true;
        } else {
        this._user = user[0];
        this._user.isSignedIn = true;
        this._router.navigate(['/checkout']);
        }
      }
    );
  }

请注意登录方法 this._user = user[0]; 中的行。如果我在此行之后立即打印用户属性,那么我会看到它们已更新。但是当我去结帐组件时,它们没有更新。它们要么是旧值,要么是未定义的。

如果需要,我将提供所有代码。但感觉这就足够了。

最佳答案

我不确定这是否是理想的解决方案,但该应用程序正在按照预期的方式运行。

我将私有(private)更新方法添加到 sign-in.component.ts 并在 signIn() 中调用它> 代替 this._user = user[0];

我从@Leon 的评论中得到了提示,并得出了这个解决方案。

  signin () {
    const body = {
      UserId : this.emailAddress.value,
      Password : this.password.value
    };

    this._spinner.show();

    this._signInService.signIn(body).subscribe(
      (user) => {
        this._spinner.hide();

        // Handling error because API response is 200 Ok. Wrong API implementation.
        const userId = user[0].UserId;
        if (userId === 0) {
          this._isPasswordWrong = true;
        } else {
        this.updateUser (user[0]);
        this._router.navigate(['/checkout']);
        }
      }
    );
  }

new update ()

private updateUser (user: User) {
    let newUser = new User();
    newUser = user;
    newUser.cart = this._user.cart;
    newUser.address = this._user.address;
    newUser.isSignedIn = true;
    this._userDataService.updateUser(newUser);
  }

我愿意接受更好的答案。如果我找到了,我会张贴在这里。

关于angular - 当从 api 响应分配数据时,BehaviorSubject 没有更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50154429/

相关文章:

android - 服务通知 channel 无效 : Notification

javascript - 仅在单击文本框后才在网格中加载数据

html - Apache 中的重定向循环

java - Groovy 的 Java HTTPBuilder?

php - 仅针对登录用户的大型 POST 传输?

c# - 了解 C# 中的异步和等待

dart - 在 Router 上找不到反射信息

Angular 和 TypeScript - 显示当月的最后一天

javascript - 异步获取不可预测的 block 大小的最小行数

javascript - 避免 Node 中的回调 hell