想要在Angular 4中单击按钮时获取特定用户的详细信息

Question

我有一个表格，其中有一个按钮可以查看特定用户的详细信息。

我正在检索这样的数据

in html：

<tr *ngFor="let userData of user?.users; trackBy: userThumb">
                <td>{{ userData?.first_name }}</td>

在ts：

ngOnInit() {
    this.http.get<User>('backend.url')
      .subscribe(data => {
        this.user = data;
        console.log(data);
      });
  }

单击视图按钮时，将打开一个模式，该模式应显示用户特定的详细信息。我怎样才能实现这一目标？我尝试使用this.user.id 获取用户ID但返回undefined

Answer 1

假设按钮位于表格行内，以下内容将起作用：

<td>
    <button type="button" (click)="UserClicked(userData)">View/Edit</button>
</td>

并在component.ts文件中，UserClicked（）函数将如下所示：

UserClicked(userData: any){
    alert(JSON.stringify(userData));
    alert(userData.id);
}

如果要在弹出窗口中显示所点击用户的详细信息，请使用以下代码： component.ts文件：

selectedUser:any
UserClicked(userData: any){
    this.selectedUser=userData;
}

在模型弹出窗口中：

<table>
    <tr><td>{{selectedUser.id}}</td></tr>
    <tr><td>{{selectedUser.first_name}}</td></tr>
    ......
</table>

Answer 2

您应该查看click directive。我为您here做了一个简单示例 - 查看.html文件和.ts文件。

在你的模板中：

<button (click)="onClick(user)">Click</button>

在您的组件中：

public onClick(user: any) {
  console.log(user);
}