javascript - 使用 Angular 从弹出模式按钮删除时删除表中特定选定的行

Question

我有一个表格，其中填充了数据，每一行都有相应的删除按钮。

HTML 代码:

<tbody>
    <tr class="bx--parent-row-v2" *ngFor="let emp of filteredEmployees" data-parent-row>
            <td></td>
            <td >{{emp.fullName}}</td>
            <td >{{emp.designation}}</td>
            <td >{{emp.empCode}}</td>
            <td >{{emp.mobile}}</td> 
            <td><a class="btn" (click)="onDelete(emp.id)" data-toggle="modal" data-modal-target="#delete-confirmation-modal" ><svg width="12" height="16" viewBox="0 0 12 16"><path d="M11 4v11c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V4H0V3h12v1h-1zM2 4v11h8V4H2z"></path><path d="M4 6h1v7H4zm3 0h1v7H7zM3 1V0h6v1z"></path></svg></a>
            <div data-modal id="delete-confirmation-modal" class="bx--modal " role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-modal-label" aria-describedby="delete-confirmation-modal-heading" tabindex="-1">
                <div class="bx--modal-container">
                  <div class="bx--modal-header">
                    <p class="bx--modal-header__heading bx--type-beta" id="delete-confirmation-modal-heading">Delete</p>
                    <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
                      <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                        <title>Close Modal</title>
                        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"
                        />
                      </svg>
                    </button>
                  </div>
                  <div class="bx--modal-content">
                    <p >Are you sure you want to remove {{emp.fullName}}?</p>
                  </div>

                  <div class="bx--modal-footer">
                    <button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Cancel</button>
                    <button class="bx--btn bx--btn--primary" type="button" (click)="deleteEmployee(emp.id)"  data-modal-primary-focus>Delete</button>
                  </div>
                </div>
              </div>
            </td>
            <td><a class="btn"(click)="onEdit(emp)"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path></svg></a></td>         
                </tr>
</tbody>

当我想从模态中删除一行时，单击模态中的删除按钮(模态)。我使用函数“onDelete(emp.id)”在单击时调用模态

Typescriptcode:这里它正确地选择了我想要删除的行ID

 onDelete(id: string) {
let modalInstance = Modal.create(document.getElementById('delete-confirmation-modal'));
    modalInstance.show();
 }

从模态按钮中，我尝试通过调用按钮上的函数来删除单击“deleteEmployee(emp.id)” Typescriptcode:这里我无法传递选定的行 ID

deleteEmployee(id: string){
this.firestore.doc('employees/' + id).delete();
this.toastr.warning('Deleted successfully','Employee Register');
   }

为什么我无法从模式按钮传递选定的行 ID..我该怎么做？帮助!!!

行数据类型的类

export class Employee {
    id : string;
    fullName: string;
    empCode: string;
    mobile: string;
    designation :string;
}

Answer 1

您可以将 id 分配给“onDelete”方法内的私有(private)属性，而不是传递 id。

private contentDeleteId;
onDelete(id: string) {
    this.contentDeleteId = id;
    let modalInstance = Modal.create(document.getElementById('delete-confirmation-modal'));
    modalInstance.show();
 }

在DeleteEmployee方法中，您可以访问id。

deleteEmployee(){
   const id = this.contentDeleteId;
   this.firestore.doc('employees/' + id).delete();
   this.toastr.warning('Deleted successfully','Employee Register');
}