'Angular5'服务(rxjs / observable)两个组件渲染问题

问题描述 投票:0回答:1

我有一个包含两个组件的主列表应用程序:usersListusersMap,它们都持有private users变量,从服务中获取数据。

两人都订阅了users-service,其中有Users arrayusers data

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

Photo of the app on runtime

当我创建一个新用户时,users array会更新,usersList会被重新渲染,但usersMap不是。

我尝试了堆栈上提供的一些解决方案,但它们没有用。例如:Angular2 Observable BehaviorSubject service not working

链接到github:https://github.com/TomerOmri/angular-users-map/tree/master/test-app/src/app

    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;
      }
    
    }
javascript angular rxjs angular5
1个回答
0
投票

使用以下代码执行任务:

@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方法的服务时。希望它会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.