我的模板无法读取'id'的属性

Question

我正在尝试使用模板中的事件（单击）=“editUser（eb_user）”更新用户的信息。未读取属性“id”。

这是我收到的错误：

错误TypeError：无法读取Object.eval上的UsersComponent.push ../ src / app / component / users / users.component.ts.UsersComponent.editUser（users.component.ts:32）中未定义的属性'id'[as在handleEvent（core.js：23107）处于handleEvent（core.js：23107）的handleEvent（core.js：24177），在object.debugHandleEvent [as handleEvent]（core.js：23904）处于dispatchEvent（core.js：20556） ）在HTMLButtonElement的core.js：21003。 （platform-b​​rowser.js：993）在Object.onInvokeTask（core.js：17290）的ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：423）中

这是模板：

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

这是editUser（）方法：

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

我希望点击事件通常有效

Answer 1

来自eb_user的(click)="editUser(eb_user)"是谁？

它应该是(click)="editUser(user)"，因为你在ngFor中使用users变量迭代user。

祝好运！

Answer 2

更改为(click)="editUser(user)它在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>

Answer 3

你需要做的就是传递用户对象并访问ts中的id，或者你也可以直接从html传递id这里是一个例子

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

Answer 4

只需在Html中更改函数调用如下

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

你需要通过user项目而不是eb_user模型