Как удалить элемент в массиве с обратной сортировкой в ​​* ngFor в Angular

Question

Я пытаюсь удалить указанный c элемент в массиве на основе 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)"

Это действительно лучший способ писать код.