my template cannot read the property of 'id'

Question

I'm trying to update a user's information using the event (click) = "editUser (eb_user)" in the template. The attribute 'id' is not read.

Here is the error I receive:

ERROR TypeError: Cannot read property 'id' of undefined at UsersComponent.push../src/app/component/users/users.component.ts.UsersComponent.editUser (users.component.ts:32) at Object.eval [as handleEvent] (UsersComponent.html:24) at handleEvent (core.js:23107) at callWithDebugContext (core.js:24177) at Object.debugHandleEvent [as handleEvent] (core.js:23904) at dispatchEvent (core.js:20556) at core.js:21003 at HTMLButtonElement. (platform-browser.js:993) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17290)

This is the template:

<table class="table table-striped; mat-elevation-z8" style="width: 100%;"> <tr> <th>#</th> <th>Nom</th> <th>Prénom</th> <th>Action</th> </tr> <tr *ngFor = "let user of users"> <td>{{user.id}}</td> <td>{{user.nom}}</td> <td>{{user.prenom}}</td> <td><button class="btn btn-primary" (click)="editUser(eb_user)" style="margin-left: 20px;"> Edit</button>| </td> </tr>

Here is the editUser () method:

editUser(user: eb_user){ this.users = []; localStorage.removeItem("editUserId"); localStorage.setItem("editUserId", user.id.toString()); this.router.navigate(['edit-user']); };

I expect the click event normally works

(click)="editUser(user) change this thing it will work

arun kumar
– arun kumar

2019-04-26 10:49:04 +00:00
Commented Apr 26, 2019 at 10:49 — arun kumar
– arun kumar, Commented Apr 26, 2019 at 10:49

Andrew Radulescu · Accepted Answer · 2019-04-26 10:49:14Z

Who is eb_user from (click)="editUser(eb_user)"?

It should be (click)="editUser(user)" because you do iterate over users with user variable in ngFor.

Good luck!

Hien Nguyen · Accepted Answer · 2019-04-26 10:48:30Z

Change to (click)="editUser(user) it use user local variable in let

<table class="table table-striped; mat-elevation-z8" style="width: 100%;"> <tr> <th>#</th> <th>Nom</th> <th>Prénom</th> <th>Action</th> </tr> <tr *ngFor = "let user of users"> <td>{{user.id}}</td> <td>{{user.nom}}</td> <td>{{user.prenom}}</td> <td><button class="btn btn-primary" (click)="editUser(user)" style="margin-left: 20px;"> Edit</button>| </td> </tr>

Yash Rami · Accepted Answer · 2019-04-26 10:54:50Z

All you need to do is pass the user object and access the id in ts or you can also pass the id directly from html here is an example

// here we are passing user object <tr *ngFor = "let user of users"> <td><button class="btn btn-primary" (click)="editUser(user)" style="margin-left: 20px;"> Edit</button></td> </tr> // here we are passing user.id to ts <tr *ngFor = "let user of users"> <td><button class="btn btn-primary" (click)="editUser(user.id)" style="margin-left: 20px;"> Edit</button></td> </tr>

arun kumar · Accepted Answer · 2019-05-02 06:06:42Z

Just change function calling like follows in Html

<td><button (click)="editUser(user)" style="margin-left: 20px;"> Edit</button>| </td>

You need to pass user item not eb_user Model

Collectives™ on Stack Overflow

my template cannot read the property of 'id'

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related