使用 Angular 2/4 中的模板驱动在 Iterated *ngFor 中删除 Tr

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

问题在于你的逻辑部分：

| 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);
}

Answer 2

试试这样：

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

和 ts onDelete 方法如下：

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