Angular和obj在页面重新加载时丢失

Question

我有一个服务层，可以从API获取用户列表。然后我在组件上列出这些用户，并且我有一个用另一个组件编辑的布局。

我从列表中选择的obj保持不变，直到我重新加载页面。

如果我按照工作流程（单击导航上的用户 - >获取列表组件 - >单击用户 - >进入用户编辑页面，其中包含从selectedUser obj填写详细信息的表单）所以一切正常，直到我重新加载页面，然后obj变得未定义。

服务：

export class UserManagementService {

  selectedUser: User;
  private usersList: UserListDTO[];
  statusOptions: [{}, {}];
  password: string;
  passwordAgain: string;

  constructor(private userResoService: UserResourceService) {
  }

  getUsers() {
    this.usersList = [];
    this.userResoService.findPrivilegedUsersUsingGET().subscribe(resp => {
      resp.forEach(user => this.usersList.push(user));
    });
    this.setStatusOptions();
  }

  getUsersList(): UserListDTO[] {
    return this.usersList;
  }

  getUserById(id: string) {
    this.usersList.filter(user => {
      if (user.id === id) {
        console.log(user);
        this.selectedUser = user;
      }
    });
  }

列表的组件：

export class UsersListComponent implements OnInit {

  cols: any[];
  constructor(private userService: UserManagementService,
    private router: Router,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.userService.getUsers();
    this.cols = [
      { field: 'firstName', header: 'First Name' },
      { field: 'lastName', header: 'Last Name' },
      { field: 'email', header: 'Email' },
      { field: 'status', header: 'Status' }
    ];
  }

  private navigateToUserEdit() {
    const id = this.userService.selectedUser['id'];
    this.router.navigate(['edit', id], { relativeTo: this.route });
  }

  onRowSelect(event) {
    this.userService.selectedUser = event['data'];
    this.navigateToUserEdit();
  }

  deleteUser(user) {
    this.userService.selectedUser = user;
  }
}

用户编辑组分：

export class EditUserComponent implements OnInit {

  constructor(private userService: UserManagementService,
    private route: ActivatedRoute) { }

  userToEdit: {} = {};
  userId: string;

  ngOnInit() {
    this.userService.getUsers();
    this.userService.getUsersList();
    this.getUserIdFromParams();
    this.userService.getUserById(this.userId);
    this.userToEdit = this.userService.selectedUser;
  }

  getUserIdFromParams() {
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('userId');
    });
  }
}

我试图挂起最后一个组件，因此它也会获取用户列表，然后通过ID从URL获取用户。但是重新加载后返回也未定义。

为什么我选择的用户被“销毁”，我该如何解决这个问题。因为它是一个正在进行的项目，所以我无法摆弄服务器端的东西（也没有角度不足的行为）。

这有些是按照预期的行为吗？如果是，怎么能绕过这个？

Answer 1

页面重新加载后，您的HTTP调用是否成功？也许你已经引入了竞争条件。尝试将您的代码放入paramMap订阅中：

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('userId');

      this.userService.getUsers();
      this.userService.getUsersList();
      this.getUserIdFromParams();
      this.userService.getUserById(this.userId);
      this.userToEdit = this.userService.selectedUser;
    });
  }

编辑：请记住，一切都是异步的。 1.从你的paramMap中获取id参数（等待它直到它在那里）2。使用id，从你的服务器中获取东西（等到它返回）3。显示返回值。因此，组件中的代码应如下所示：

ngOnInit() {
  this.route.paramMap.pipe(
    map(paramMap => paramMap.get('userId')),
    switchMap(id => this.userService.getUser(id)),
    catchError(() => /* error handling */)
  ).subscribe(user => this.user = user);
}

在您的服务中它应该看起来像：

getUser(id: number) {
  this.userResoService.findPrivilegedUsersUsingGET().pipe(
    map((users => users.find(user => user.id === id))
  )
}