使用角度从弹出模式按钮中删除时，删除表中的特定选定行

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();
 }

从模态按钮，我试图通过调用按钮上的函数来删除单击“delete员工（emp.id）”Typecriptcode：这里我无法通过选定的行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

你让它变得比需要的更难。在你的超文本标记语言中*ngFor循环

然后，当您调用delete时，您会传回i.（单击）=“delete（i）”

然后在ts

Delete(index: number) {
    filteredEmployees.splice (index, 1);
}

Answer 2

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

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

在删除员工方法中，您可以访问id。

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