加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – 打字无法在Ionic 2 App中找到提供者

发布时间:2020-12-17 17:27:24 所属栏目:安全 来源:网络整理
导读:我已经创建了一个初始化PouchDB数据库的服务,并且我试图在另一个组件中调用该服务及其方法.我一直收到这个错误: [23:43:34] Error: Error at /Users/Brad/IonicApps/CMTAv2/.tmp/pages/projects/projects.ts:24:27 [23:43:34] Cannot find name 'ProjectSer
我已经创建了一个初始化PouchDB数据库的服务,并且我试图在另一个组件中调用该服务及其方法.我一直收到这个错误:

[23:43:34]  Error: Error at /Users/Brad/IonicApps/CMTAv2/.tmp/pages/projects/projects.ts:24:27 
[23:43:34]  Cannot find name 'ProjectService'. 
[23:43:34]  ngc failed 
[23:43:34]  ionic-app-script task: "build" 
[23:43:34]  Error: Error

这是我的服务代码:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

/*
  Generated class for the ProjectService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/

let PouchDB = require('pouchdb');

@Injectable()
export class ProjectService {
  private _db;
  private _projects;

  constructor(public http: Http) {
    console.log('Hello ProjectService Provider');
  }

  initDB() {
    this._db = new PouchDB('Projects',{ adapter: 'websql' });
  }

  add(project) {
    return this._db.post(project);
  }

  delete(project) {
    return this._db.remove(project);
  }

  getAll() {

    if (!this._projects) {
      return this._db.allDocs({ include_docs: true})
          .then(docs => {

            // Each row has a .doc object and we just want to send an
            // array of birthday objects back to the calling controller,// so let's map the array to contain just the .doc objects.

            this._projects = docs.rows.map(row => {
              // Dates are not automatically converted from a string.
              row.doc.Date = new Date(row.doc.Date);
              return row.doc;
            });

            // Listen for changes on the database.
            this._db.changes({ live: true,since: 'now',include_docs: true})
                .on('change',this.onDatabaseChange);

            return this._projects;
          });
    } else {
      // Return cached data as a promise
      return this._projects;
    }
  }

  private onDatabaseChange = (change) => {
    var index = this.findIndex(this._projects,change.id);
    var project = this._projects[index];

    if (change.deleted) {
      if (project) {
        this._projects.splice(index,1); // delete
      }
    } else {
      change.doc.Date = new Date(change.doc.Date);
      if (project && project._id === change.id) {
        this._projects[index] = change.doc; // update
      } else {
        this._projects.splice(index,change.doc) // insert
      }
    }
  }

  // Binary search,the array is by default sorted by _id.
  private findIndex(array,id) {
    var low = 0,high = array.length,mid;
    while (low < high) {
      mid = (low + high) >>> 1;
      array[mid]._id < id ? low = mid + 1 : high = mid
    }
    return low;
  }


}

这是我的另一个组件的代码:

import {Component,NgZone} from '@angular/core';
import {NavController,ModalController} from 'ionic-angular';
import { ReportsPage } from '../reports/reports';
import { ProjectDetailPage } from '../project-detail/project-detail';
import { ProjectService } from  '../../providers/project-service.ts';
import { Platform } from 'ionic-angular';

/*
  Generated class for the Projects page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/



@Component({
  selector: 'page-projects',templateUrl: 'projects.html',providers: [ProjectService]
})
export class ProjectsPage {
  public projects = [];
  private projectService: ProjectService;

  constructor(public navCtrl: NavController,public modalCtrl: ModalController,private platform: Platform,private zone: NgZone) {

    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.projectService.initDB();
      this.projectService.getAll()
          .then(data => {
            this.zone.run(() => {
              this.projects = data;
            });
          })
          .catch(console.error.bind(console));
    });

  }

  ionViewDidLoad() {
    console.log('Hello Projects Page');

  }

  public addProject() {
    let modal = this.modalCtrl.create(ProjectDetailPage);
    modal.present();
  }

  public openProject(project) {
    this.navCtrl.push(ReportsPage);
  }

}

有什么理由可能会发生这种情况?我试过搞乱app.module.ts中的声明,但是没有做任何事情.我的IDE告诉我它可以找到’ProjectService’,所以那里没有问题.我是否必须在Typings配置中声明提供程序?

感谢您的帮助!

解决方法

这是因为您没有实例化该服务.

export class ProjectsPage {
  public projects = [];
  private projectService: ProjectService;

  constructor(public navCtrl: NavController,private zone: NgZone) {

在那里,您只是说有一个带有ProjectService类型的对象projectService,但您没有创建它.您可以将其移动到构造函数参数:

export class ProjectsPage {
  public projects = [];

  constructor(public navCtrl: NavController,private projectService: ProjectService;
              private platform: Platform,private zone: NgZone) {

或者在构造函数内部:

this.projectService = new ProjectService(this.http); <-- Need to add http to your constructor arguments.

第一个选项是最好的选项,第二个选项只应在实例化服务之前等待条件发生时使用.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读