删除表中的特定行

Question

我刚开始使用 angular。我检查了几个链接 stackoverflow 链接，但在我的情况下没有任何工作。我有一个表，我正在动态添加行，我还需要动态删除行，但我的代码删除了最后一行的行，即使我点击删除一些其他行的按钮。我在下面的代码中使用，我在下面给出了 stackblitz 链接。 提前致谢。

 rows = [1]; addrows() { this.rows.push(1); } deleterow(row){ this.rows.splice(row, 1); }

 <table> <tr *ngFor="let row of rows;"> <td> something</td> <td> something</td> <td> something</td> <td> <button class="btn btn-danger" (click)="deleterow(i)">Delete</button> </td> <tr> <table> <div class="text-center"> <button class="btn btn-primary" (click)="addrows()">ADD more rows</button> </div>

闪电战链接

Answer 1

您需要使用行的索引来拼接行。 您目前只是希望神奇地创建一个变量i 。

在我的解决方案的 component.ts 中，我将允许我的 HTML 向一个简单数组添加和删除。

组件.ts

counter: number = 0;

rows = [];

addRow() {
  this.counter++;
  this.rows.push(this.counter);
}

deleteRow(row: number) {
  this.rows.splice(row, 1);
}

deleteRow函数的关键是您需要访问*ngFor的当前索引。 为此，您可以在*ngFor使用let i = index将当前索引存储在变量i 。

组件.html

<table>
  <tr *ngFor="let row of rows; let i = index">
    <td>{{row}}</td>
    <td><button (click)="deleteRow(i)">Delete row</button></td>
  </tr>
</table>

<button (click)="addRow()">Add row</button>

演示： https : //stackblitz.com/edit/angular-7uwuye

Answer 2

Javascript

deleterow(id){ document.getElementById("row"+id).remove(); }

HTML

<td id="row1"> <button class="btn btn-danger" onclick="deleterow(1)">Delete</button> </td>