Question

我想提供离子存储服务。该服务需要执行所有CRUD方法并能够获取所有值。

我的应用程序甚至没有启动，只是进入了白屏。我不知道我在做什么错。我在控制台中没有任何错误。

这是我的服务代码：

import { Flow } from "../Flow";
import { Task } from "../Task";
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
@Injectable()
export class FlowService {
    constructor(private storage: Storage){
    }

    public  createFlow(projectName:string,columns:string[]):number{
     var tasks = new Map<number,Task>();
     var flowId = Number(this.storage.length());
     var flow = new Flow(flowId,projectName,columns,tasks)
     this.storage.set(flowId.toString(),JSON.stringify(flow));
     return flowId;
    }

    //Exists to get flow out of database or such
    public createExistingFlow(flowId:number,projectName:string,tasks:Map<number,Task>,columns:string[]){
        var flow = new Flow(flowId,projectName,columns,tasks)
        this.storage.set(flowId.toString(),JSON.stringify(flow));
       }

    public addTask(flowId:number,title:string,description:string,column?:number){
        var flow:Flow
        this.storage.get(flowId.toString()).then((val) => {
            flow = JSON.parse(val);
          });
        var taskId = flow.tasks.size;
        var task = new Task(flowId,taskId,title,description,column);
        flow.tasks.set(taskId,task);
        this.storage.set(flowId.toString(),JSON.stringify(flow));
    }

    public getFlow(flowId:number){
       return this.storage.get(flowId.toString()).then((val) => {
           return val;
          });

    }
}

我在这里的构造函数中使用该服务：

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Flow } from '../../model/Flow';
import { FlowService } from '../../model/services/flowService';
import {CreateTaskPage} from '../create-task/create-task'
import { Task } from '../../model/Task';
import { Storage } from '@ionic/storage';
/**
 * Generated class for the FlowPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-flow',
  templateUrl: 'flow.html',
})
export class FlowPage {
  flow:Flow;
  constructor(public navCtrl: NavController, public navParams: NavParams,private flowService:FlowService,public modalCtrl: ModalController) {
    flowService.getFlow(navParams.get("flowId")).then(data =>{
      this.flow = JSON.parse(data);
    })
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FlowPage');
  }

  createTask(){
    const modal = this.modalCtrl.create(CreateTaskPage,{flowId:this.flow.flowId});
    modal.present();
  }
  swipe(e,task:Task){
    if(e.direction == 2){
      console.log("panUp");
      task.column--;
    }
    if(e.direction == 4){
      console.log("panDown");
      task.column++;
    }
  }
}

在加载应用程序后，它需要在菜单中显示所有流程。在这里，我不使用服务，因为我不知道如何在服务中实现此功能。我只是直接使用存储

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { CreateFlowPage } from '../pages/create-flow/create-flow';
import {FlowPage} from '../pages/flow/flow'
import { FlowService } from '../model/services/flowService';
import { Flow } from '../model/Flow';
import { Storage } from '@ionic/storage';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any, flowId:number}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,private flowService:FlowService,private storage:Storage) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage, flowId: null },
      { title: 'Create Project', component: CreateFlowPage, flowId: null }
    ];

       this.storage.forEach((value) =>{
            var flow:Flow = JSON.parse(value);
            this.pages.push({title: flow.projectName, component: null, flowId:flow.flowId})
        });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
  openFlowPage(flow:Flow){
    console.log(flow.flowId)
    this.nav.setRoot(FlowPage,{flowId:flow.flowId})
  }
}

有人知道出了什么问题或可能是什么问题吗？感谢您的帮助。

Answer 1

我发现了我的错误。我在服务中有一个ngFor调用方法，该方法不返回任何内容。由于某些原因，我的应用程序因此而无法加载，这就是为什么我没有收到任何错误消息的原因。

离子存储服务白屏

1 个答案: