Angular 5中如何选中数据行？本人为Angular新手，恳请指导

嘿，作为Angular新手完全不用客气呀！刚上手框架难免会有摸不清的地方，咱们先把你给出的代码整理清楚，再聊聊几个新手常碰到的小细节～

你提供的原始HTML代码片段 #

<!--添加新按钮-->
<div>
  <button type="button" (click)="AddModal.show()"> </button>
  <button type="button" (click)="EditModal.show()"> </button>
  <button type="button" (click)="DeleteModal.show()"> </button>
</div>

<!--展示用户信息的数据表格-->
<div class="dash-table-container...">
  <!-- 这里是你的表格内容 -->
</div>

几个实用的优化建议（针对新手） #

• 给按钮加明确文本和基础样式：空按钮用户根本不知道用途，加上文本和样式会更直观友好：

  <div class="btn-group mb-3">
    <button type="button" (click)="AddModal.show()" class="btn btn-primary">添加新用户</button>
  </div>
  

  如果是表格每行的编辑/删除按钮，还要绑定当前用户数据（不能直接全局调用模态框），示例如下：

  <!-- 表格行内的操作按钮 -->
  <tr *ngFor="let user of userList">
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
    <td>
      <button type="button" (click)="openEditModal(user)" class="btn btn-sm btn-secondary">编辑</button>
      <button type="button" (click)="confirmDelete(user.id)" class="btn btn-sm btn-danger">删除</button>
    </td>
  </tr>
  

• 确保模态框引用正确：你用到的AddModal这类变量，需要在组件类里通过@ViewChild获取模板引用。假设你的模态框模板是这样的：

  <!-- 添加用户模态框模板 -->
  <ng-template #AddModal let-modal>
    <div class="modal-header">
      <h4 class="modal-title">添加新用户</h4>
      <button type="button" class="close" (click)="modal.dismiss('Cross click')">×</button>
    </div>
    <div class="modal-body">
      <!-- 你的用户表单内容 -->
    </div>
  </ng-template>
  

  那组件类里要这么声明引用：

  import { Component, ViewChild } from '@angular/core';
  import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; // 以NG Bootstrap模态框为例
  
  @Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html',
    styleUrls: ['./user-list.component.css']
  })
  export class UserListComponent {
    @ViewChild('AddModal') AddModal: any;
    @ViewChild('EditModal') EditModal: any;
    userList: any[] = []; // 你的用户数据列表
  
    constructor(private modalService: NgbModal) { }
  
    // 封装模态框打开方法更灵活
    openAddModal() {
      this.modalService.open(this.AddModal);
    }
  }
  

• 编辑/删除要关联具体用户：表格里的编辑操作需要把当前用户数据传入模态框，删除操作需要知道要删除的用户ID，组件类里可以这么写：

  selectedUser: any;
  
  openEditModal(user: any) {
    this.selectedUser = {...user}; // 深拷贝避免直接修改原数据
    this.modalService.open(this.EditModal);
  }
  
  confirmDelete(userId: number) {
    if(confirm(`确定要删除ID为${userId}的用户吗？`)) {
      // 这里调用删除接口的逻辑
      // this.userService.deleteUser(userId).subscribe(res => {
      //   this.userList = this.userList.filter(u => u.id !== userId);
      // });
    }
  }
  

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