刪除表中的特定行

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>