Angular 显示来自本地存储器7的更新数据[解析]

我有一个名为“编辑用户”的组件，用户可以在其中编辑自己的姓名。此数据在本地存储中正确加载和刷新，并且我的服务工作正常，因为新数据在数据库中发生了更改

问题出在我的标题中，因为在更新之前仍然显示名称。但是，如果我刷新浏览器，名称将正确显示。 使用的组件包括用户服务、编辑用户组件和标题。问题出在标题视图中

这是我的服务： user.service.ts

update(users, idUsuario): Observable<any> {
    let json = JSON.stringify(users);
    let params = "json=" + json;
    let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.put(this.url + 'user/update/' + idUsuario, params, { headers: headers });
}

getIdentity() {
    let identity = JSON.parse(localStorage.getItem('identity'));
    if (identity && identity != 'undefined') {
      this.identity = identity;
    } else {
      this.identity = null;
    }
    return this.identity;
  }

getIdentity函数从本地存储获取信息，该函数位于my user.service.ts中

update(users, idUsuario): Observable<any> {
    let json = JSON.stringify(users);
    let params = "json=" + json;
    let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.put(this.url + 'user/update/' + idUsuario, params, { headers: headers });
}

getIdentity() {
    let identity = JSON.parse(localStorage.getItem('identity'));
    if (identity && identity != 'undefined') {
      this.identity = identity;
    } else {
      this.identity = null;
    }
    return this.identity;
  }

在HTML头组件中，我显示了如下信息

<div class="u-text">
     <h4> {{ identity.nombreUsuario + ' ' + identity.apellidoUsuario }} </h4>
     <p class="text-muted"> {{ identity.email }} </p>
     <p class="text-muted"> {{tipoUsuario}} </p>

{{identity.nombreUsuario+''+identity.apellidoUsuario}}
{{identity.email}
{{tipoUsuario}

---

我见过很多类似的问题，但对我来说不起作用。我已经读到我需要在我的header组件中使用ngDoCheck，但我不知道如何使用它。我曾尝试在服务和其他组件中使用EventEmitter，但它也不起作用。在同一项目中的其他组件中，我使用了EventEmitter，并且工作正常。但我不知道在这种情况下如何实施

您可以在用户服务中使用

BehaviorSubject

将更改发送给所有订阅者：

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

@Injectable()
export class UserService {

  identity = new BehaviorSubject('');

  constructor() {
    // get the identity from localStorage
    this.identity.next('initial_value');
  }

  updateIdentity(newIdentity: string) {
    this.identity.next(newIdentity);
    // also set the identity in localStorage;
  }
}

在您的HeaderComponent中，您隶属于

行为主体

：

export class HeaderComponent implements OnInit {
  public identity;

  constructor( public userService: UserService ) {   }

  ngOnInit() {
    this.userService.identity.subscribe(res => {
      this.identity = res;
    });
  }
}

检查我做的这次闪电战：

---

这是一种方法。有关更多信息，您可以查看有关的角度文档。

您可以在用户服务中使用

行为主题

将更改发送给所有订阅者：

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

@Injectable()
export class UserService {

  identity = new BehaviorSubject('');

  constructor() {
    // get the identity from localStorage
    this.identity.next('initial_value');
  }

  updateIdentity(newIdentity: string) {
    this.identity.next(newIdentity);
    // also set the identity in localStorage;
  }
}

在您的HeaderComponent中，您隶属于

行为主体

：

export class HeaderComponent implements OnInit {
  public identity;

  constructor( public userService: UserService ) {   }

  ngOnInit() {
    this.userService.identity.subscribe(res => {
      this.identity = res;
    });
  }
}

检查我做的这次闪电战：

---

这是一种方法。有关更多信息，您可以查看有关的角度文档。

最终是非常容易解决的问题。我只需要在header组件中使用“DoCheck”。大概是这样的：

user.component.ts

import { Component, OnInit, DoCheck } from '@angular/core';

constructor(public userService: UserService) {
    this.cargarUsuario();
    this.url = global.url;
  }

ngDoCheck(){
    this.cargarUsuario();
  }

  cargarUsuario(){
    this.identity = this.userService.getIdentity();
  }

---

最后是很容易解决的。我只需要在header组件中使用“DoCheck”。大概是这样的：

user.component.ts

import { Component, OnInit, DoCheck } from '@angular/core';

constructor(public userService: UserService) {
    this.cargarUsuario();
    this.url = global.url;
  }

ngDoCheck(){
    this.cargarUsuario();
  }

  cargarUsuario(){
    this.identity = this.userService.getIdentity();
  }

---

当

onSubmit

函数中的数据发生变化时，您可以使用

Subject

通知

标题

。感谢您的回答，我会试试。当

onSubmit

函数中的数据发生变化时，您可以使用

Subject

通知

标题

。感谢您的回答，Jacopo，我试试看。谢谢kari的回答。我会立即尝试，看看会发生什么。我已经尝试实施了你的解决方案。但是标题中的名称仍然没有更改。我检查了两次，但我仍然认为问题在于头部的ngOnInit，因为BehaviorSubject没有显示my console.log，这就像头部组件没有进入函数一样。我仍然在寻找其他解决这个问题的方法。如果能看到你的代码就好了。如果您正在谈论您的HeaderComponent的

ngOnInit

，那么您应该调用

this.userService.updateIndentity（newIdentity）

，以便BehaviorSubject可以发出新值。我将在ngOnInit中重试该更改，并查看其他详细信息。谢谢你的时间！最好使用

主题

，因为代码不能直接访问值。谢谢kari的回答。我会立即尝试，看看会发生什么。我已经尝试实施了你的解决方案。但是标题中的名称仍然没有更改。我检查了两次，但我仍然认为问题在于头部的ngOnInit，因为BehaviorSubject没有显示my console.log，这就像头部组件没有进入函数一样。我仍然在寻找其他解决这个问题的方法。如果能看到你的代码就好了。如果您正在谈论您的HeaderComponent的

ngOnInit

，那么您应该调用

this.userService.updateIndentity（newIdentity）

，以便BehaviorSubject可以发出新值。我将在ngOnInit中重试该更改，并查看其他详细信息。谢谢你的时间！最好使用

主题

，因为代码不能直接访问值。这可以奏效，但远不是理想的解决方案。你真的应该试着用角度来理解组件之间的相互作用。这是可行的，但远不是一个理想的解决方案。您应该真正尝试以角度理解组件交互。