如何通过单击该行中的删除按钮从Angular 2中的表中删除特定行 [英] How to delete a particular row from table in Angular 2 by clicking delete button from that row

问题描述

我试图通过单击for循环中该行的按钮来删除特定行，但是它会删除该表的所有行。

I am trying to delete a particular row by clicking button from that row which is in for loop,but its deleting all the rows of that table.

这是我的Html代码：

Here is my Html code:

<table id="mytable" class="table table-bordred table-striped">
    <tbody id="del">
        <tr *ngFor="let cart of modalData">
            <td>
                <div style="display:inline-flex;">
                    <div style="margin-left:10px;">
                        <p class="font_weight" style="font-size:13px;">{{cart.ExamName}}</p>
                        <p>{{cart.Categoryname}}|{{cart.CompanyName}}</p>
                    </div>
                </div>
            </td>
            <td>
                <div style="margin-top: 32px;">
                    <p class="font_weight" style="font-size:13px;"></p> <span class="font_weight" style="font-size: 13px;"> {{cart.Amount| currency :'USD':'true'}} </span> </div>
            </td>
            <td>
                <div style="margin-top: 19px;">
                    <button class="button_transparent" (click)="Delete(cart)"> delete </button>
                </div>
            </td>
        </tr>
        <tr> </tr>
    </tbody>
</table>

这是我的组件：

public loadData() {       

                let transaction = new TransactionalInformation();
                this.myCartService.GetExamOrderForCart()
                    .subscribe(response => this.getDataOnSuccess(response),
                    response => this.getDataOnError(response));          

        }

    getDataOnSuccess(response) {       
        this.modalData = response.Items;
        }

这是我的删除方法：

public Delete(response) {
     this.myCartService.updateExamOrder(response)
     .subscribe(response => this.getDataOnSuccessForDelete(response),
     response => this.getDataOnErrorForDelete(response));
} 

请帮我做，如何从表中只删除一行？

Please help me to do, How to delete only one row from table?

推荐答案

你可以这样做：

< button class =button_transparent（click）=delete（cart）>删除< / button>

然后

delete(item){
    this. modalData = this. modalData.filter(item => item.id !== id);
    this.modalData.push();}

这里你要创建一个没有的新列表您要删除的元素。

here you are creating a new list without the element that you want to delete.

这篇关于如何通过单击该行中的删除按钮从Angular 2中的表中删除特定行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！