'Angular5' 服务 (rxjs/observable) 两个组件呈现问题

Question

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

两者都订阅了 users-service，其中 Users array 和 users data。

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

Photo of the app on runtime

当我创建新用户时，users array 会更新，usersList 会重新呈现，但是 usersMap 不是。

我尝试了堆栈上提供的一些解决方案，但它们没有用。例如：

一个link到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);
  }

现在在您的两个组件中使用此用户属性来获取数据。当你需要添加时调用服务的addUser方法即可。希望对你有帮助。

'Angular5' 服务 (rxjs/observable) 两个组件呈现问题

'Angular5' Service (rxjs/observable) two components rendering issue

javascript

rxjs

angular

angular5