this.storageService.addItem не является функцией IONI C V4

Question

У меня есть приложение ToDo, и я использую localalstorage. Когда я пытаюсь создать новую задачу ToDo, у меня возникает следующая проблема:

this.storageService.addItem is not a function 

Я много чего пробую, но у меня все еще есть проблема

весь этот код из этого видео => https://www.youtube.com/watch?v=h_IhS8QQjUA

Я работаю с Иони c 4.

Это моя служба хранения:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
export interface Item{
  id:number,
  title:string,
  value:string,
  modified:number
}
const ITEMS_KEY = 'my-items';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor(private Storage:Storage) { }

  addItem(item:Item): Promise<any>{
    return this.Storage.get(ITEMS_KEY).then((items:Item[]) =>{
      if (items){
        items.push(item)
        return this.Storage.set(ITEMS_KEY, items);
      }else{
        return this.Storage.set(ITEMS_KEY, [item]);
      }
    });
  }

И моя Добавить страницу

import { Component, OnInit, ViewChild } from '@angular/core';
import { StorageService, Item } from '../services/storage.service';
import { Platform, ToastController,IonList } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add',
  templateUrl: './add.page.html',
  styleUrls: ['./add.page.scss'],
})
export class AddPage  {
  Items: Item[] = []
  newItem: Item = <Item>{};
    @ViewChild('mylist', {static: false})mylist:IonList;
  constructor(private storageService: StorageService, private plt: Platform, private Toast: ToastController, private Router: Router) {
   }

    addItem(){
     this.newItem.modified =  Date.now();
     this.newItem.id =  Date.now();

      this.storageService.addItem(this.newItem).then(item =>{
       this.newItem = <Item>{};
       this.presentToast('Tarea Añadida!')
       this.Router.navigateByUrl('home');

     })
   }
   async presentToast(msg){
    const toast = await this.Toast.create({
      message:msg,
      duration: 2000
    })
    toast.present()
   }
}

И моя html Страница добавления, где я вводю данные во входы и отправляю с зеленой кнопкой

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
<ion-input type="text" placeholder="Titulo" [(ngModel)]="newItem.title"></ion-input>
<ion-item>
<ion-label position="floating">Agregar Tarea</ion-label>
  <ion-textarea [(ngModel)]="newItem.value"></ion-textarea>
</ion-item>
<ion-footer>
  <ion-button expand="block" color="success" (click)="addItem()" >Agregar!</ion-button>
</ion-footer>
</ion-content>

Answer 1

Попробуйте внедрить хранилище с другим (от импорта) именем, так как ваш текущий код использует импортированное хранилище и внедрено как хранилище, обратите внимание, что в видео код отличается:

constructor(private storage:Storage) { }

  addItem(item:Item): Promise<any>{
    return this.storage.get(ITEMS_KEY).then((items:Item[]) =>{
      if (items){
        items.push(item)
        return this.storage.set(ITEMS_KEY, items);
      }else{
        return this.storage.set(ITEMS_KEY, [item]);
      }
    });
  }