this.storageService.addItem 不是函数 IONIC V4答案

【问题标题】：this.storageService.addItem is not a function IONIC V4this.storageService.addItem 不是函数 IONIC V4
【发布时间】：2020-05-17 15:23:14
【问题描述】：

我有一个 ToDo 应用程序，我使用本地存储。当我尝试创建一个新的 ToDo 任务时，我遇到了下一个问题：

this.storageService.addItem is not a function

我尝试了很多东西，但我总是遇到问题

所有这些代码都来自这个视频 => https://www.youtube.com/watch?v=h_IhS8QQjUA

我正在使用 Ionic 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>

【问题讨论】：

标签： angular typescript ionic3 ionic4

【解决方案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]);
      }
    });
  }

【讨论】：