Удалить определенную выбранную строку в таблице при удалении из всплывающей модальной кнопки с помощью угловых

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: здесь он правильно выбирает идентификатор строки, которую я хотел удалить

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

Из модальной кнопки я пытаюсь удалить, вызывая функцию по нажатию кнопки «deleteEmployee (emp.id)». Typescriptcode: здесь я не могу передать выбранный идентификатор строки

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

Почему я не могу передать выбранный идентификатор строки из модальной кнопки ... как я могу это сделать? Помогите !!!

класс для типов данных в строки

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

Answer 1

Вместо передачи идентификатора вы можете присвоить идентификатор приватному свойству внутри метода onDelete.

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

Внутри метода DeleteEmployee вы можете получить доступ к идентификатору.

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

Answer 2

Вы делаете это сложнее, чем нужно.В HTML на вас * ngFor loop <tr class="bx--parent-row-v2" *ngFor="let emp of filteredEmployees; let i = index" data-parent-row> вы добавляете индекс.

Затем, когда вы звоните удалить, вы передаете обратно я.(щелчок) = «удалить (i)»

Затем в тс

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