How to delete an ion-item from ion-list?

Question

I am trying to implement a delete function for ion-items in an ion-list which are stored in a Firestore instance. I tried to solve it with the .splice() function but this throws following error:

Property 'splice' does not exist on type 'Observable<any[]>'.ts(2339)

Anyone an idea how to solve this?

The code looks like this:

HTML

  <ion-item-sliding *ngFor="let space of spaces | async; let i = index">
    <ion-item>
      <ion-icon name="ellipse-outline"></ion-icon>
      <ion-label>
        &nbsp; {{ space.spaceName }}
      </ion-label>
    </ion-item>
    <ion-item-options (ionSwipe)="deleteSpace(i)">
      <ion-item-option color="success" (click)="editspacenameModal()"> 
        Edit
      </ion-item-option>
      <ion-item-option color="danger" (click)="deleteSpace(i)" expandable> 
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

TS

export class ActivitiesPage implements OnInit {

  spaces: Observable<any[]>; 

...

deleteSpace(i) {
    this.spaces.splice(i,1);
    console.log('deleteSpace() called')
  }

Answer 1

Here's how I solved it:

HTML

<ion-item-sliding *ngFor="let space of spaces | async">
    <ion-item detail>
      <ion-icon name="ellipse-outline" start></ion-icon>
      <ion-label>
        &nbsp; {{ space.spaceName }}
      </ion-label>
    </ion-item>
    <ion-item-options (ionSwipe)="deleteSpace(space)">

      <ion-item-option color="success" (click)="editspaceModal(space)"> Edit </ion-item-option>
      <ion-item-option color="danger" (click)="deleteSpace(space)" expandable> Delete </ion-item-option>
    
    </ion-item-options>
  </ion-item-sliding>

TS

  deleteSpace(space: Space): void {
    console.log('space.id',space)
      this.setisDeleted(space);
  }

  setisDeleted(space): Promise<any> {

    const isDeleted = true;
    
    return this.angularFirestore
    .collection('accounts')
    .doc(this.userId)
    .collection("spaces")
    .doc(space.spaceId)
    .update({ isDeleted })
  }v

Answer 2

You'll want to filter the actual array and not the observable wrapped around it. So you'll map the content of the Observable (which is an any[]) to a filtered spaces.

  deleteSpace(i) {
    this.spaces = this.spaces.pipe(
            map(result => result.filter((r, index) => i !== index))
        )
    console.log('deleteSpace() called')
    this.spaces.subscribe((out) => console.log(out))
  }

using filter inside map operator will solve your problem.

Answer 3

One way would be to convert your observable and filter it out:

Read more here:

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const data = this.yourdata.filter(item => item.property !== desiredvalue)

You can also detect changes in the list and filter the observable directly.

Read more here:

https://www.learnrxjs.io/learn-rxjs/operators/filtering/filter

maybe this question is of help to you:

how to filter an Observable array?