How to splice/remove an item from a list that was reversed

Question

so im displaying an array in reverse order

*ngFor="let item of items.reverse(); let i = index"

The problem I'm having is that when I try to delete an item like so,

deleteItem(row) {
    this.items.splice(row,1);
  }

EXAMPLE... array_items= [item1,item2,item3,item4]; So when its displayed, it will display array_items[3] first but if I try to delete it, it will delete array_items[0] . Does that make sense? it doesn't delete the correct one. How can I do this? Thanks in advance for the help.

Answer 1

Since the list is reversed, the index will not be row but this.items.length - row , so I would try:

deleteItem(row) {
    this.items.splice(this.items.length - (row + 1), 1);
}

Answer 2

Hi when you reverse items in ngfor , the value doesn't change just in view and the items value in your component class reversed . I think you should use costume reverse pipe :

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({ name: 'reverse' })

    export class ReversePipe implements PipeTransform {
        transform(value) {
            return value.slice().reverse();
        }
    }

so the items reversed just in view.

*ngFor="let item of items | reverse let i = item.length + index - 1;"

Answer 3

You should keep start as the length of the array subtracting the currentIndex plus 1.

deleteItem(row){
  this.item.splice(this.item.length - (row +1), 1);
}

This will remove the original item from the array.

Answer 4

I suggess :

deleteItem(row){
this.item.splice(this.item.length - (row +1), 1);
}