![](/img/trans.png)
[英]Angular2: Delete selected table row on clicking button in modal window
[英]How to delete a particular row from table by clicking button Angular 2
我正在嘗試通過單擊for循環中該行的按鈕來刪除特定行,但是會刪除該表的所有行。
這是我的HTML代碼:
<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));
}
請幫我做,如何從表中僅刪除一行?
您可以在* ngFor中添加index
:
<tr *ngFor="let cart of modalData;let i = index">
然后,在方法中傳遞索引:
<button class="button_transparent" (click)="delete(i)"> delete </button>
最后:
delete(i){
this.modalData.splice(i,1);
}
你可以這樣做:
<button class="button_transparent" (click)="delete(cart)"> delete </button>
然后
delete(item){
this. modalData = this. modalData.filter(item => item.id !== id);
this.modalData.push();}
在這里,您正在創建一個新列表,其中沒有要刪除的元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.