Angular 从BehaviorSubject获取用户名，并在登录后在标题部分显示需要刷新的用户名

我正在创建一个角度应用程序。我有AuthenticationService类。在这里登录后，我将account对象放入一个BehaviorSubject observable中。这样我就可以订阅可观察到的，并获得帐户对象的必要信息。这是我的密码：

private accountSubject: BehaviorSubject<AccountInfo>;
    public account: Observable<AccountInfo>;

    constructor(
        private router: Router,
        private service: ApplicationService) {

        // behaviour subject
        this.accountSubject = new BehaviorSubject<AccountInfo>(JSON.parse(localStorage.getItem('account')));
        this.account = this.accountSubject.asObservable();
    }

    public get accountValue(): AccountInfo {
        return this.accountSubject.value;
    }

    login(username: string, password: string) {
        return this.service.post<any>(`${this.apiPATH}login`, { username, password })
            .pipe(map(user => {             
                localStorage.setItem('account', JSON.stringify(user.account));
                this.accountSubject.next(user);
                return user;
            }));
    }

查看

<h5 class="mb-0 text-white nav-user-name">{{username}}</h5>

---

这可能只是一个时间问题，可能是在设置

帐户之前调用了
ngOnInit
，或者没有触发更改检测。请尝试在构造函数中对订阅进行以下更新

constructor（私有cd:ChangeDetectorRef）{
this.authService.account.subscribe（x=>{
这个帐户=x
this.userName=this.account.name；
//记录结果，以确保实际收到结果
console.log（'帐户：'，x）
//以防它检测不到变化
this.cd.detectChanges（）
})
}
就像上面提到的@Drenai一样，这看起来像是一个时间问题。当您使用行为主题时，您设置了一个初始值，该值在开始时为null，因为存储中没有设置任何内容，这可能就是为什么您在开始时看不到任何内容（您可以调试并查看存储或该变量是否真的为null，以便确认）

现在，您可以执行以下操作：在标头组件中，定义一个可观察项：

accountInfo$: Observable;

然后，在ngOnInit中初始化此obersavble

ngOnInit() {        
        this.accountInfo$= this.authService.account;
    }

然后在html文件中，使用异步管道，以便angular处理订阅：


HTML:


{{accountInfo.name}

因此，您基本上可以删除account变量以及在构造函数和ngOnInit主体中编写的代码。只需使用从ngOnInit中的依赖注入/服务中获得的可观察值初始化变量accountInfo$。
谢谢您的回答。但它也不起作用。
accountInfo$: Observable;

ngOnInit() {        
        this.accountInfo$= this.authService.account;
    }

<div *ngIf="accountInfo$ | async as accountInfo">
<h5 class="mb-0 text-white nav-user-name">{{accountInfo.name}}</h5>
</div>