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

yer 发表于 Dev

地方

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

我正在检索这样的数据

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

普拉文·库马尔

假设按钮在您的表格行内，以下将起作用：

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

在模型弹出 html 中：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-06-26

0 条评论

登录后参与评论