当在模态上单击确认按钮时，角度2从表中删除行

Question

我在组件中使用以下函数在单击删除按钮时从表中删除行

remove(item) {

   this.data.splice(this.data.indexOf(item),1);        
}

然后在删除按钮内的模板中调用此函数以删除行。这是有效的。而不是在单击删除按钮时删除行，我想在用户单击bootstrap模式中的确认按钮时删除该行。当调用模态确认按钮中的删除功能时，它总是从表中删除最后一行。我怎样才能实现这一目标？仅在单击模态确认按钮而不是单击实际删除按钮时删除行

以下项目是常驻

<tbody>
<tr *ngFor="let resident of mf.data">
    <td>{{resident.res_firstname}}</td>
    <td>{{resident.res_surname}}</td>
    <td>{{resident.res_homePhone}}</td>
    <td class="text-right">{{resident.res_DoB}}</td>
    <td>{{resident.res_City | uppercase}}</td>
    <td><a class="btn mini red-stripe" href="{site_url()}admin/editFront/2">Edit</a></td>

    <td><a class="confirm-delete btn mini red-stripe " style="color:red; font-size : 16px" role="button" data-title="kitty" data-id="2" data-toggle="modal" data-target="#deleteModal">Delete</a></td>
</tr>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
        </div>
        <div class="modal-body">

            <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

        </div>
        <div class="modal-footer ">
            <button type="button" class="btn btn-success" (click)="remove(resident)"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->