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

Question

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

我正在检索这样的数据

在 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，但返回未定义

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);
}

如果您想在弹出窗口中显示单击用户的详细信息，请使用以下代码: 组件.ts 文件:

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

在模型弹出 html 中:

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