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

Question

I have a table with data populated and corresponding delete button in each and every row.

HTML code:

<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>

When i want a delete a row from modal invoked when clicked on a delete button from it(modal).I'm invoking a modal on click by using function "onDelete(emp.id)"

Typescriptcode:here it correctly picks the row id i wanted to delete

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

From modal button i'm trying to delete by calling function on button click "deleteEmployee(emp.id)" Typescriptcode:Here im not able to pass the selected row id

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

Why i'm not able pass the selected row id from the modal button..how can i do that?Help!!!

class for data types to the rows

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

Answer 1

Instead of passing the id, you can assign the id to private property inside 'onDelete' method.

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

Inside DeleteEmployee method, you can access the id.

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

Answer 2

You are making it harder than it needs to be. In HTML on you *ngFor loop <tr class="bx--parent-row-v2" *ngFor="let emp of filteredEmployees; let i = index" data-parent-row> you add the index.

Then when you call delete you pass back i. (click)=“delete(i)”

Then in ts

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