Question

我从休息中获得用户列表。我需要在datatable（ng-prime）中列出这些用户。如果您单击一行，则应该转到所需的路线 （[[hostname] / users / edit / [userId] 正常！

但是，如果刷新页面，则会出现上述错误。我想了解为什么会这样。

user-management.service.ts：

// imports are here//
@Injectable({
  providedIn: 'root'
})
export class UserManagementService {

  selectedUser: {};
  private usersList: UserListDTO[] = [];

  constructor(private userResoService: UserResourceService) { }

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

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

user-list.component.ts：

export class UsersListComponent implements OnInit {

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

  ngOnInit() {
    this.userService.getUsers();
    this.listOfUsers = this.userService.getUsersList();
    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;
  }
}

edit-user.component.ts：

export class EditUserComponent implements OnInit {

  constructor(private userService: UserManagementService) { }

  userToEdit: {};
  ngOnInit() {
    this.userToEdit = this.userService.selectedUser;
  }
}

edit-user.component.html：

<p>
  {{userToEdit['id']}}
</p>

我在最后一个文件中遇到了错误。我在想它可能由于某些生命周期挂钩而不存在，但是我该如何解决这个问题呢？请启发我SO的人。

编辑！： 可以，然后呢！如果在导航后检查用户Obj很好，但是如果刷新页面 userToEdit = undefined 。我该如何找回Obj？

或者我应该怎么做？请不要告诉我使用本地存储。 ty

Answer 1

只需使用ngIg添加验证，如下所示：

edit-user.component.html：

<p *ngIf="userService.selectedUser | async">
  {{userToEdit['id']}}
</p>

Angular无法读取未定义的属性“ id”

1 个答案: