javascript - 如何在Angular中的* ngFor中删除反向排序数组中的项目

Question

我正在尝试删除基于index. 目前，我在删除数组的第一个和最后一个元素时遇到问题。当我尝试删除最后一个元素时，第一个元素被删除，反之亦然。

这是我的代码的摘录

HTML

<div *ngFor="let item of itemsList.slice().reverse(); index as i">
  <ion-item>{{item.name}} <button (click)="deleteItem(i)">Delete</button></ion-item>
</div>

TS

itemsList = [{
  name: 'Item 0'
}];
count = 0;

constructor() {}

addItem() {
  this.count += 1
  this.itemsList.unshift({
    name: `Item ${this.count}`
  })
}

deleteItem(index) {
  console.log('Delete ', this.itemsList[index].name)
  this.itemsList.splice(index, 1)
}

我使用 StackBlitz创建了一个工作示例。有人可以帮忙吗？

Answer 1

在拼接中使用length - index - 1以获得正常数组的正确索引。

this.itemsList.splice(this.itemsList.length - index -1, 1)

Answer 2

我想不出你为什么不这样编码的任何理由：

(click)="deleteItem(item)"

这确实是一种更好的代码编写方式。