如何使用AngularJS实现点击表格行眼睛图标弹窗显示对应行详情

核心思路 #

给每个眼睛图标绑定点击事件，传递当前行的交易数据，将该数据赋值给模态框的展示变量，再触发模态框打开即可实现点击对应行展示对应详情的效果。

具体实现步骤 #

1. 组件TS文件改造 #

• 在组件类中定义变量存储当前选中的交易详情：

  currentTransaction: any;
  isModalOpen = false; // 用于控制模态框显示/隐藏
  

• 新增处理眼睛图标点击的方法，接收当前行数据：

  openTransactionDetails(transaction: any) {
    this.currentTransaction = transaction;
    this.isModalOpen = true;
  }
  

2. HTML模板改造 #

• 在表格的眼睛图标按钮上绑定点击事件，传递当前行数据：

  <button (click)="openTransactionDetails(row)">
    <i class="icon-eye"></i>
  </button>
  

• 修改模态框内容，用currentTransaction渲染对应行的数据：

  <div class="modal" *ngIf="isModalOpen">
    <div class="modal-body">
      <p>交易ID：{{ currentTransaction.id }}</p>
      <p>交易金额：{{ currentTransaction.amount }}</p>
      <p>交易时间：{{ currentTransaction.createTime }}</p>
      <!-- 其他字段根据你的数据结构对应添加 -->
    </div>
  </div>
  

组件库模态框适配（如Angular Material） #

如果使用UI组件库的模态框，可直接将数据传入对话框组件：

openTransactionDetails(transaction: any) {
  this.dialog.open(TransactionDetailModalComponent, {
    data: transaction
  });
}

在对话框组件中通过依赖注入接收数据：

import { MAT_DIALOG_DATA } from '@angular/material/dialog';

constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}

之后在对话框模板中用data变量渲染详情即可。

内容的提问来源于stack exchange，提问作者Syed Athif Moulana