Is there a way to remove items from storage by clicking on a button added through input and stored in the page? Although elements are deleted from the page, they seem to be retained in storage even after refreshing the page.
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();
}
);
}
}