Question

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

从列表中选择的obj一直保留到重新加载页面为止。

如果我按照工作流程进行操作（在nav上单击用户->获取列表组件->单击user->进入用户编辑页面，其中的表单由 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');
    });
  }
}

我尝试将最后一个组件连接起来，因此它还会获取用户列表，然后通过来自URL的ID来获取用户。但这在重新加载后也返回undefined。

为什么我选择的用户被“破坏”了，我该如何解决此问题。由于这是一个正在进行的项目，因此我无法摆弄服务器端的内容（也不存在引擎盖下的行为）。

这是否符合预期的行为？如果是，该如何绕过？

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))
  )
}

重新加载页面时，角度obj丢失

1 个答案: