windows - Angular 2 如何从存储中删除列表项

Question

如何通过点击按钮从存储(Storage)中移除元素。元素通过 input 输入并添加到页面中。新项目存储在存储中。现在情况是这样的 - 通过单击按钮删除页面上的元素，当我更新页面时，它们仍然保留在原位。它们继续存储在某个地方。

文件 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>

文件 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);
   }
}   

文件 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();
      }
    );
   }
 }

Answer 1

问题是，在您的 deletePlace(i) 方法中，您要从 内存 位置数组中删除该项目，但您没有更新存储。

您服务中的 deletePlace(...) 方法将不起作用，因为您将存储中的位置保存为数组，因此您无法删除特定位置。

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

---

我会这样修复它:

在您的服务中，创建一个新方法以使用您对内存数组所做的更改来更新存储:

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

然后在您的组件代码中，在删除一个地方后调用该方法:

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);