1
votes

mon modèle ne peut pas lire la propriété de 'id'

J'essaye de mettre à jour les informations d'un utilisateur en utilisant l'événement (click) = "editUser (eb_user)" dans le modèle. L'attribut 'id' n'est pas lu.

Voici l'erreur que je reçois:

ERROR TypeError: Impossible de lire la propriété 'id' de undefined sur UsersComponent.push ../ src / app / component / users / users.component.ts.UsersComponent.editUser (users.component.ts: 32) à Object.eval [as handleEvent] (UsersComponent.html: 24) à handleEvent (core.js: 23107) à callWithDebugContext (core.js: 24177) à Object.debugHandleEvent [comme handleEvent] (core.js: 23904) à dispatchEvent (core.js: 20556) à core.js: 21003 à HTMLButtonElement. (platform-browser.js: 993) sur ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 423) à Object.onInvokeTask (core.js: 17290)

Voici le modèle:

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

Voici la méthode editUser ():

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

Je pense que l'événement de clic fonctionne normalement

typescript angular

1 commentaires

(click) = "editUser (user) change cette chose, cela fonctionnera

4 Réponses :

1
votes

Remplacez par (click) = "editUser (user) il utilise la variable locale utilisateur dans 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>

0 commentaires

0
votes

Qui est eb_user de (click) = "editUser (eb_user)" ?

Cela devrait être (click) = "editUser (user)" car vous effectuez une itération sur utilisateurs avec la variable user dans ngFor. < / p>

Bonne chance!

0 commentaires

0
votes

Changez simplement l'appel de la fonction comme suit en Html

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

Vous devez passer l'élément user pas eb_user Model

0 commentaires

0
votes

Tout ce que vous avez à faire est de passer l'objet utilisateur et d'accéder à l'id dans ts ou vous pouvez également passer l'id directement depuis html voici un exemple

// 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>

0 commentaires