时间戳

首页 > 解决方案 > 我想获取单击用户的 ID 并在我在引导模式上单击是时将其删除

html - 我想获取单击用户的 ID 并在我在引导模式上单击是时将其删除

问题描述

这是 html 文件，我想获取特定学生的 id 点击并使用弹出模式删除学生

<div style="margin-top: 50px;">
    <table  datatable="ng" class="row-border hover" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
      <thead>
        <tr>
          <th>S/N</th>
          <th>Full Name</th>
          <th>Class</th>
          <th>Sex</th>
          <th>Edit</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let student of students; let i = index">
          <td>{{i+1}}</td>
          <td><a [routerLink]="['/view-student', student.id]" >{{student.lastName  +  '   '  +   student.firstName}}</a></td>
          <td>{{student.grade.name}}</td>
          <td>{{student.sex.name}}</td>
          <td><a [routerLink]="['/edit-student', student.id]" class="btn btn-primary" >Edit</a></td>
          <td><a  data-toggle="modal" data-target="#myModal" class="btn btn-danger">Delete</a></td>
        </tr>
       
      </tbody>
    </table>
    
    </div>


<!-- Modal -->
<div class="modal fade"  id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Warning</h4>
      </div>
      <div class="modal-body">
        Are you sure you want to delete..
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" (click)="" data-dismiss="modal" class="btn btn-primary">Yes</button>
      </div>
    </div>
  </div>
</div>

这是我在组件中用于删除我点击的学生的删除功能。提前谢谢你的帮助

delete(id){
this.studentService.delete(id).subscribe(() => {
  this.students.splice(id, 1);
this.loadAllStudents();
});}

标签： htmlangular

解决方案

只需在组件属性中保存当前学生 ID。

html（表格）：

...
<td><a (click)="setId(student.id)" data-toggle="modal" data-target="#myModal" class="btn btn-danger">Delete</a></td>
...

ts：

public id = ''

setId(id) {
  this.id = id
}

html（模态）：

...
<button type="button" (click)="delete(id)" data-dismiss="modal" class="btn btn-primary">Yes</button>
...

推荐阅读