Я новичок в изучении Angular, и у меня возникают некоторые проблемы с настройкой пользовательского сервиса, когда я хочу поддерживать состояние пользователя, которым я могу поделиться с компонентами. Кроме того, при некоторых обращениях к бэкэнду я хочу обновить это состояние в службе и автоматически отражать его в компонентах.

Мой метод в настоящее время пытается использовать Observables, а затем подписаться на него в компонентах.

UserService.ts

@Injectable({ providedIn: "root" }) export class UserService { userSubject = new Subject{amp}lt;object{amp}gt;(); public user = this.userSubject.asObservable(); constructor( private AuthenticationService: AutheticationService, private http: HttpClient ) {} userObservable() { return this.user; } async getCurrentLoggedUserData() { try { let resp: any = await this.http .get(`${environment.userApi}/users/current`) .toPromise(); if (resp) { // ---- Pushing data to user subject ---- this.userSubject.next(resp.hasOwnProperty("user") ? resp.user : null); } } catch (err) { console.log("Error: ", err); } } createOrganization(orgData) { return this.http.post(`${environment.userApi}/organizations`, orgData); } } 

Мой компонент (org-tile.component.ts) у меня есть:

 @Component({ selector: "app-org-tile", templateUrl: "./org-tile.component.html", styleUrls: ["./org-tile.component.css"] }) export class OrgTileComponent implements OnInit { user: any = {}; _ = _; type = "Company"; name = ""; shorthand = ""; constructor( private UserService: UserService, private modalService: NgbModal ) { this.UserService.userObservable().subscribe(user ={amp}gt; { this.user = user; console.log("in subscribe", this.user); // {amp}lt;----- LINE (A) -----{amp}gt; }); } open(content) { this.modalService.open(content); } createOrganization() { this.UserService.createOrganization({ name: this.name, shorthand: this.shorthand, type: this.type.toLowerCase() }).subscribe( async data ={amp}gt; { await this.UserService.getCurrentLoggedUserData(); console.log("User data should be reloaded", this.user); this.modalService.dismissAll(); }, err ={amp}gt; { console.error(err.error.message); }, () ={amp}gt; console.log("done loading foods") ); } } 

Мой HTML (org-tile.component.html) [Это долго, но выкладываю простую версию]:

 {{user.randomNumber}} {amp}lt;button class="button" (click)="getCurrentLoggedUserData()"{amp}gt;Get Data Again{amp}lt;/button{amp}gt; {amp}lt;button class="main-button" (click)="createOrganization()"{amp}gt;Create{amp}lt;/button{amp}gt; 

В настоящее время, когда я нажимаю кнопку «Получить данные снова», [LINE (A)] в файле component.ts выше, печатает update this.user , но страница html не обновляется с последним user.randomNumber. Когда я нажимаю на нее снова, то [LINE (A)] снова печатает обновленный this.user (с новым randomNumber), но теперь html отображает предыдущий randomNumber. Таким образом, при каждом нажатии отображается значение предыдущего состояния.

Точно так же, если я обновлю страницу и нажму кнопку «Создать», она не обновит HTML в первый раз.

Кроме того, я хотел бы услышать любые рекомендации (или альтернативные методы для моего), как настроить службу, поддерживающую состояние.