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”方法内将ID分配给私有属性。

WorkSpace\.metadata\.plugins\org.eclipse.e4.workbench

在DeleteEmployee方法内部，您可以访问ID。

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

Answer 2

您正在使它变得更加困难。在您的* ngFor循环<tr class="bx--parent-row-v2" *ngFor="let emp of filteredEmployees; let i = index" data-parent-row>上的HTML中，添加索引。

然后，当您调用删除时，您将回传i。（click）=“删除（i）”

然后在ts

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

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

2 个答案: