удалить конкретную строку в таблице

Question

я только что начал с angular .i проверил несколько ссылок на stackoverflow, но ни одна не работала в моем случае. У меня есть таблица, в которой я добавляю строки динамически, и мне также нужно удалять строки динамически, но мой код удаляет строки из последней строки даже я нажимаю кнопку удаления некоторого другого row.i используемого ниже кода, и я даю ссылку 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 добавлять и удалять из простого массива.

component.ts

counter: number = 0;

rows = [];

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

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

Ключом к функции deleteRow является то, что вам необходим доступ к текущему индексу в пределах *ngFor. Для этого вы можете использовать let i = index в *ngFor для хранения текущего индекса в переменной 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>

DEMO: 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>