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

【问题标题】：Angular Cannot read property 'id' of undefinedAngular 无法读取未定义的属性“id”
【发布时间】：2019-07-25 21:44:50
【问题描述】：

我正在从休息中获取用户列表。我需要在数据表（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>

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

编辑！ 可以，然后呢！如果我在导航后检查用户 Obj 很好，但如果我刷新页面 userToEdit = undefined。我怎样才能找回那个 Obj？

或者我应该怎么做才能拥有它？请不要告诉我使用本地存储。太棒了

【问题讨论】：

标签： angular typescript undefined angular7

【解决方案1】：

只需像这样使用 ngIf 添加验证：

edit-user.component.html:

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

【讨论】：

那只是为了检查我是否得到了正确的 DTO。但我应该能够编辑所有用户数据并在未来填写表格。在未定义的情况下，我不能只 ngIf 整个表单。因为我需要重新加载所选用户的值。
现在 IF 条件将异步等待 Observable 有值。
如果您重新加载页面，它永远不会评估为 true。一旦您导航到所需的路线，它就会起作用。但是如果你重新加载它就消失了。它甚至是一个无效的管道参数。
ASYNC 是一个有效的管道，请查一下。如需重新加载，请阅读此答案stackoverflow.com/questions/54480750/…