'Angular5'服务（rxjs / observable）两个组件渲染问题

Question

我有一个具有两个组件的主列表应用程序： usersList和usersMap都拥有一个private users变量，它们从服务中获取数据。

两者都订阅了一个具有Users array和users data的users-service 。

此数组上的每个更改都将导致两个组件都呈现并更新其用户变量。

应用在运行时的照片

当我创建一个新用户，该users array被更新，而usersList被重新呈现，但usersMap isn`t。

我尝试了一些堆栈提供的解决方案，但是它们没有用。 例如： Angular2 Observable BehaviorSubject服务不起作用

指向github的链接： https : //github.com/TomerOmri/angular-users-map/tree/master/test-app/src/app

• UserList组件： https : //github.com/TomerOmri/angular-users-map/blob/master/test-app/src/app/userlist/userlist.component.ts

• UserMap组件： https ： //github.com/TomerOmri/angular-users-map/blob/master/test-app/src/app/usersmap/usersmap.component.ts

• User服务：

  import { Injectable } from '@angular/core'; import { Observable } from "rxjs/Observable"; import { of } from "rxjs/observable/of"; import { User } from "./user"; import { USERS } from "./users-mock"; @Injectable() export class UserService { constructor() { } getUsers(): Observable<User[]> { var userList = of(USERS); return userList; } } 

Answer 1

使用以下代码执行任务：

@Injectable()
export class UserService {
  private userList = USERS;
  public users = new BehaviourSubject<any>(userList);
  constructor() { }

  addUser(user): {
    this.userList.push(user);
    this.users.next(this.userList);
  } 

现在，在两个组件中都使用此users属性来获取数据。 当您需要添加时，只需调用服务的addUser方法即可。 希望它会有所帮助。