CODEWITHSUNDEEP
windowsangulartypescriptionic2storage
Igor Sabler
Igor Sabler

Reputation: 33

Angular 2 How to remove a list item from Storage

How to remove items from the storage (Storage) by clicking on the button. Elements are entered through the input and added to the page. New items are stored in the Storage. Now the situation is this - the elements are deleted on the page by clicking on the button, when I update the page, they still remain in place. They continue somewhere to be stored.

file home.html

<ion-list>
<ion-item *ngFor="let place of places ; let i  = index" 
  (click)="onOpenPlace(place)">{{ place.title }}
</ion-item>
  <button ion-button color="danger" (click)="deletePlace(i)">Delete</button>
</ion-list>

file home.ts

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';          /*** does not work ***/

import { ModalController, NavController } from 'ionic-angular';
import { NewPlacePage } from "../new-place/new-place";
import { PlacePage } from "../place/place";
import { PlacesService } from "../../services/places.service";
import { Place } from "../../model/place.model";

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
 export class HomePage {
  places: {title: string}[] = [];

  constructor(
    private storage: Storage,
    public navCtrl: NavController,
    private placesService: PlacesService,
    private modalCtrl: ModalController) {

   }

    ionViewWillEnter() {
      this.placesService.getPlaces()
        .then(
      (places) => this.places = places
    );
   }

    onLoadNewPlace() {
      this.navCtrl.push(NewPlacePage);
   }

    onOpenPlace(place: Place) {
      this.modalCtrl.create(PlacePage, place).present();
   }

    deletePlace(i){                               /*** does not work ***/
      console.log('delete') 
        this.places.splice(i, 1);
   }
}

file places.service.ts

import { Storage } from '@ionic/storage';          /*** does not work ***/
import { Injectable } from '@angular/core';
import { Place } from '../model/place.model';

@Injectable()
   export class PlacesService {
     private places: Place[] = [];

   constructor ( private storage: Storage) {}

   addPlace(place: Place) {
     this.places.push(place);
     this.storage.set('places', this.places);
}

   deletePlace(place: Place){                 /*** does not work ***/
     this.storage.remove('places');
}

   getPlaces() {
     return  this.storage.get('places')
       .then(
     (places) => {
       this.places = places == null ? [] : places;
       return this.places.slice();
      }
    );
   }
 }

Upvotes: 3

Views: 1230

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

The problem is that in your deletePlace(i) method, you're removing the item from your in memory array of places, but you're not updating the storage.

The deletePlace(...) method from your service won't work because you're saving the places in the storage as an array, so you can't remove a specific place.

deletePlace(place: Place) {
    this.storage.remove('places');
}

I would fix it like this:

In your service, create a new method in order to update the storage with the changes you make to the in memory array:

saveChanges(places: Array<Place>) {
     this.places = places;
     this.storage.set('places', this.places);
}

And then in your component code, call that method after removing a place:

deletePlace(i) {
    console.log('delete');

    // Delete the place from the in memory array
    this.places.splice(i, 1);

    // Update the storage with the new list of places
    this.placesService.saveChanges(this.places);

}

Upvotes: 2

Related Questions