Angular 4点击按钮获取指定用户详情的实现方法

看起来你是把整个用户列表的容器对象当成单个用户来用啦，这就是问题所在！你的this.user是从接口返回的包含users数组的顶层对象（比如结构是{ users: User[] }），所以this.user.id根本不存在，我们需要存储点击的那个具体用户的信息，才能在模态框里展示专属详情。下面是具体的实现步骤：

1. 在组件类中添加选中用户的变量 #

首先在你的组件TS文件里，定义一个变量用来存储被点击的用户：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// 确保你的User接口定义正确，包含需要的字段
interface User {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  // 其他你需要的字段
}
interface UserResponse {
  users: User[];
}

@Component({
  selector: 'app-user-table',
  templateUrl: './user-table.component.html',
  styleUrls: ['./user-table.component.css']
})
export class UserTableComponent implements OnInit {
  user?: UserResponse;
  // 新增：存储选中的用户
  selectedUser?: User;

  constructor(private http: HttpClient) {}

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

  // 新增：处理查看按钮的点击事件
  openUserDetailModal(user: User) {
    // 把点击的用户赋值给selectedUser
    this.selectedUser = user;
    // 这里调用你的模态框打开逻辑，比如如果是自定义模态框，就设置显示状态为true
    // 比如：this.modalVisible = true;
  }
}

2. 修改表格的查看按钮，传递当前用户 #

在HTML的表格里，给查看按钮绑定点击事件，把当前循环的userData传进去：

<table>
  <tr *ngFor="let userData of user?.users; trackBy: userThumb">
    <td>{{ userData?.first_name }}</td>
    <!-- 其他表格列 -->
    <td>
      <!-- 点击时把当前userData传给openUserDetailModal方法 -->
      <button (click)="openUserDetailModal(userData)">查看详情</button>
    </td>
  </tr>
</table>

<!-- 你的模态框组件/结构 -->
<div *ngIf="selectedUser" class="modal">
  <div class="modal-body">
    <h2>用户详情</h2>
    <p>ID: {{ selectedUser.id }}</p>
    <p>姓名: {{ selectedUser.first_name }} {{ selectedUser.last_name }}</p>
    <p>邮箱: {{ selectedUser.email }}</p>
    <!-- 其他你需要展示的详情字段 -->
    <button (click)="selectedUser = undefined">关闭</button>
  </div>
</div>

3. 如果使用Angular Material对话框的进阶方案 #

如果你用的是Angular Material的MatDialog，可以把选中的用户作为数据传入对话框组件，这样更模块化：

父组件中打开对话框： #

import { MatDialog } from '@angular/material/dialog';
import { UserDetailDialogComponent } from './user-detail-dialog/user-detail-dialog.component';

// ... 其他代码

constructor(private http: HttpClient, private dialog: MatDialog) {}

openUserDetailModal(user: User) {
  // 打开对话框并传入用户数据
  this.dialog.open(UserDetailDialogComponent, {
    data: user
  });
}

对话框组件中接收数据： #

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { User } from '../user-table.component';

@Component({
  selector: 'app-user-detail-dialog',
  templateUrl: './user-detail-dialog.component.html'
})
export class UserDetailDialogComponent {
  // 通过MAT_DIALOG_DATA获取传入的用户数据
  constructor(@Inject(MAT_DIALOG_DATA) public user: User) {}
}

对话框的HTML： #

<h2 mat-dialog-title>{{ user.first_name }} {{ user.last_name }}</h2>
<mat-dialog-content>
  <p>ID: {{ user.id }}</p>
  <p>邮箱: {{ user.email }}</p>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>关闭</button>
</mat-dialog-actions>

关键提醒 #

• 确保你的User接口包含所有需要展示的字段，避免出现undefined的情况；
• 使用trackBy函数可以提升表格的性能，你已经在使用了，这点做得很好！

内容的提问来源于stack exchange，提问作者yer