Удалить Tr в Iterated *ngFor Использование шаблонов, управляемых в Angular 2/4

Question

Как я могу удалить эту строку, используя шаблонную форму? Я запутался, так как массивы повторяются в *ngFor? как я могу это сделать? Вот что я сделал ниже.

HTML

<tr *ngFor="let innerItem of project.material_projects | orderBy: {property: column, direction: direction} |  let i = index">
    <td>{{innerItem.material.name}}</td>
    <td>{{innerItem.balance}}</td>
    <td>
    <button type="button" class="btn btn-sm btn-danger" (click)="onDelete(i)"> Delete</button>
    </td>
</tr>

TS

onDelete(index: number) {
      this.projects.material_projects.splice(index, 1)
}

Answer 1

Попробуй так:

<tr *ngFor="let i = index; let innerItem of project.material_projects | orderBy: { property: column, direction: direction }">
    <td>{{innerItem.material.name}}</td>
    <td>{{innerItem.balance}}</td>
    <td>
        <button type="button" class="btn btn-sm btn-danger" (click)="onDelete(i)"> Delete</button>
    </td>
</tr>

и метод onDelete, как показано ниже:

onDelete(index) {
    this.project.material_projects.splice(index, 1);
}

Answer 2

Проблема с вашей логической частью:

| orderBy: {property: column, direction: direction} |

Это переупорядочивает ваш project.material_projects массив, и вы используете индекс переупорядоченного массива, поэтому вам нужно выполнить ту же операцию перед этой строкой:

this.projects.material_projects.splice(index, 1)

И это сделано.

---

ИЛИ ЖЕ

Вы можете передать id если его уникальный лайк, onDelete(innerItem.id)

затем

onDelete(id: number) {
    let index = // logic to find index of that id ;
    this.projects.material_projects.splice(index, 1);
}