Angular Cannot read property 'id' of undefined

Question

I am getting a list of users from a rest. I need to list these users in a datatable(ng-prime). If you click on a row it should get you to the desired route ([hostname]/users/edit/[userId] which works fine!

However if i refresh the page i got the error above. I'd like to understand why is it happening.

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>

I am getting the error at the last file. I am thinking maybe it's not existing because of some lifecycle hooks, but then how can i work my way around this issue? Enlighten me people of SO please.

EDIT!: Okay so! If I check the user Obj after I navigated it's fine but if I refresh the page userToEdit = undefined. How can I get that Obj back?

Or what should I do to have it? Please don't tell me to use localstorage. ty

mruanova · Answer 1 · 2019-09-23T13:44:45.810

0

Just add a validation with ngIf like this:

edit-user.component.html:

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

edited Sep 23 '19 at 13:44

answered Mar 04 '19 at 14:55

mruanova

6,351
6
37
55

that's just in for checking if i get the correct DTO. But i should be able to edit all userdata and fill a form with those in the future. I can't just ngIf the whole form in case of undefined. because i need to reload the values of the selected user. – Exitl0l Mar 04 '19 at 15:01
Now the IF condition will wait asynchronously for the Observable to have a value. – mruanova Mar 04 '19 at 15:17
It's never going to evaluate true if you reload the page. It works once you navigate to the desired route. But if you reload it's gone. And it's even an invalid pipe argument. – Exitl0l Mar 04 '19 at 15:26
ASYNC is a valid pipe, look it up. For the reload please read this answer https://stackoverflow.com/questions/54480750/angular-6-project-displays-404-error-after-refresh/54481966#54481966 – mruanova Mar 04 '19 at 15:44

Angular Cannot read property 'id' of undefined

1 Answers1