通过在 angular 中单击，从 *ngFor 中的另一个组件分配变量值 2

Question

我尝试在*ngFor中将对象传递给另一个组件，但在table中只传递了最后一个对象，但应该显示被点击的对象，如何解决这个问题？

  <tr data-toggle="control-sidebar" *ngFor="let user of pagedItems">
      <td><control-sidebar [user]="user">
  </control-sidebar>{{ user.name }}</td>

并且在另一个组件视图中仅显示最后 table 行。

Answer 1

当您将 user 数据绑定到 control-sidebar 时：

[user]="userDtails"，问题就出在这里

修改代码：

<tr data-toggle="control-sidebar" *ngFor="let user of pagedItems">
      <td (click)="getUser(user)"><control-sidebar [user]="user">
  </control-sidebar>{{ user.name }}</td>

确保您已经在组件 class.

中定义了 getUser 方法

注意我设置了：[user]="user"。因为您想将 user 对象传递给 control-sidebar.

现在一切正常。

编辑 :

因为你想显示被点击的 user 你可以绑定一个方法到 (click) 处理程序并传递 user 对象。例如：

(click)="showUser(user)"

通过在 angular 中单击，从 *ngFor 中的另一个组件分配变量值 2

Assign variable value from another component in *ngFor by click in angular 2

input

selector

pass-data

ngfor

angular