未捕获(承诺):TypeError:无法读取属性' executeSql'未定义的

时间:2017-12-14 12:35:06

标签: angular sqlite typescript ionic-framework local-storage

我在异步中从我的JSON API获取文章,当用户没有互联网连接时,我想用SQLite进行本地存储,但我有 这两个错误:

  

cordova_not_available

     

错误错误:未捕获(在承诺中):TypeError:无法读取属性' executeSql'未定义的   TypeError:无法读取属性' executeSql'未定义的       在SqliteService.webpackJsonp.173.SqliteService.createTables(Sqlite.service.ts:30)       在SqliteService.webpackJsonp.173.SqliteService.saveAllArticles(Sqlite.service.ts:114)       在新的AlaUnePage

我创建了一个服务sqlite.service.ts,它应该创建我的数据库,我的表,并在我调用我的AlaUnePage的构造函数时插入每篇文章。

我的服务代码:

    import {Injectable} from '@angular/core';
import {SQLite, SQLiteObject} from '@ionic-native/sqlite';
import {ArticlesService} from "./articles.service";

const DATABASE_FILE_NAME: string = "data.db";

@Injectable()
export class SqliteService {

  private db: SQLiteObject;

  constructor(protected sqlite: SQLite, protected articlesService: ArticlesService) {
  }

  public createDatabaseFile() {
    this.sqlite.create({
      name: DATABASE_FILE_NAME,
      location: 'default'
    })
      .then((db: SQLiteObject) => {
        this.db = db;
        this.createTables();
        console.log("Database créée");
      })
      .catch(e => console.log("Erreur : "+e));
  }

  public createTables() {
    console.log('ici');
    this.db.executeSql(
      'CREATE TABLE IF NOT EXISTS all_articles(' +
      'id INT PRIMARY KEY, ' +
      'titre TEXT, ' +
      'introduction TEXT, ' +
      'image TEXT, ' +
      'redacteur_nom TEXT, ' +
      'redacteur_twitter TEXT, ' +
      'date_publication NUMERIC, ' +
      'contenu_part1 TEXT, ' +
      'tweet TEXT,' +
      'image2 TEXT, ' +
      'contenu_part2 TEXT, ' +
      'tweet2 TEXT, ' +
      'image3 TEXT, ' +
      'contenu_part3 TEXT, ' +
      'tweet3 TEXT, ' +
      'image4 TEXT, ' +
      'contenu_part4 TEXT, ' +
      'tweet4 TEXT, ' +
      'image5 TEXT, ' +
      'contenu_part5 TEXT, ' +
      'tweet5 TEXT, ' +
      'image6 TEXT, ' +
      'contenu_part6 TEXT, ' +
      'tweet6 TEXT, ' +
      'image7 TEXT, ' +
      'contenu_part7 TEXT, ' +
      'tweet7 TEXT, ' +
      'image8 TEXT, ' +
      'contenu_part8 TEXT, ' +
      'tweet8 TEXT, ' +
      'image9 TEXT, ' +
      'contenu_part9 TEXT, ' +
      'tweet9 TEXT, ' +
      'image10 TEXT, ' +
      'contenu_part10 TEXT, ' +
      'tweet10 TEXT)', {})
      .then(() => {
        this.db.executeSql(
          'CREATE TABLE IF NOT EXISTS all_articles(' +
          'id INT PRIMARY KEY, ' +
          'titre TEXT, ' +
          'introduction TEXT, ' +
          'image TEXT, ' +
          'redacteur_nom TEXT, ' +
          'redacteur_twitter TEXT, ' +
          'date_publication NUMERIC, ' +
          'contenu_part1 TEXT, ' +
          'tweet TEXT,' +
          'image2 TEXT, ' +
          'contenu_part2 TEXT, ' +
          'tweet2 TEXT, ' +
          'image3 TEXT, ' +
          'contenu_part3 TEXT, ' +
          'tweet3 TEXT, ' +
          'image4 TEXT, ' +
          'contenu_part4 TEXT, ' +
          'tweet4 TEXT, ' +
          'image5 TEXT, ' +
          'contenu_part5 TEXT, ' +
          'tweet5 TEXT, ' +
          'image6 TEXT, ' +
          'contenu_part6 TEXT, ' +
          'tweet6 TEXT, ' +
          'image7 TEXT, ' +
          'contenu_part7 TEXT, ' +
          'tweet7 TEXT, ' +
          'image8 TEXT, ' +
          'contenu_part8 TEXT, ' +
          'tweet8 TEXT, ' +
          'image9 TEXT, ' +
          'contenu_part9 TEXT, ' +
          'tweet9 TEXT, ' +
          'image10 TEXT, ' +
          'contenu_part10 TEXT, ' +
          'tweet10 TEXT)', {})
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));
      }).catch(e => console.log(e));
  }

  public saveAllArticles(allArticles)
  {
    this.createTables();
    allArticles.subscribe(article => {
      console.log(article['article_id']);
      this.db.executeSql('INSERT INTO all_articles (' +
        'id,' +
        'titre,' +
        'introduction,' +
        'image,' +
        'redacteur_nom,' +
        'redacteur_twitter,' +
        'date_publication,' +
        'contenu_part1,' +
        'tweet,' +
        'image2,' +
        'contenu_part2,' +
        'tweet2,' +
        'image3,' +
        'contenu_part3,' +
        'tweet3,' +
        'image4,' +
        'contenu_part4,' +
        'tweet4,' +
        'image5,' +
        'contenu_part5,' +
        'tweet5,' +
        'image6,' +
        'contenu_part6,' +
        'tweet6,' +
        'image7,' +
        'contenu_part7,' +
        'tweet7,' +
        'image8,' +
        'contenu_part8,' +
        'tweet8,' +
        'image9,' +
        'contenu_part9,' +
        'tweet9,' +
        'image10,' +
        'contenu_part10,' +
        'tweet10) VALUES ('
        +article.article_id+ ','
        +article.article_titre+ ',' +
        +article.article_introduction+ ',' +
        +article.article_image+ ',' +
        +article.article_redacteur_nom+ ',' +
        +article.article_redacteur_twitter+ ',' +
        +article.article_date_publication+ ',' +
        +article.article_contenu_part1+ ',' +
        +article.article_tweet+ ',' +
        +article.article_image2+ ',' +
        +article.article_contenu_part2+ ',' +
        +article.article_tweet2+ ',' +
        +article.article_image3+ ',' +
        +article.article_contenu_part3+ ',' +
        +article.article_tweet3+ ',' +
        +article.article_image4+ ',' +
        +article.article_contenu_part4+ ',' +
        +article.article_tweet4+ ',' +
        +article.article_image5+ ',' +
        +article.article_contenu_part5+ ',' +
        +article.article_tweet5+ ',' +
        +article.article_image6+ ',' +
        +article.article_contenu_part6+ ',' +
        +article.article_tweet6+ ',' +
        +article.article_image7+ ',' +
        +article.article_contenu_part7+ ',' +
        +article.article_tweet7+ ',' +
        +article.article_image8+ ',' +
        +article.article_contenu_part8+ ',' +
        +article.article_tweet8+ ',' +
        +article.article_image9+ ',' +
        +article.article_contenu_part9+ ',' +
        +article.article_tweet9+ ',' +
        +article.article_image10+ ',' +
        +article.article_contenu_part10+ ',' +
        +article.article_tweet10+
        ')', {})
        .then(() => {
          this.db.executeSql('', {})
            .then(() => console.log('Executed SQL'))
            .catch(e => console.log(e));
        }).catch(e => console.log(e));
    });
  }
}

我页面中的构造函数:

      constructor(public navCtrl: NavController,
              public modalCtrl: ModalController,
              protected articlesService: ArticlesService,
              protected sqliteService: SqliteService,
              private network: Network,
              public toastCtrl: ToastController)
  {
    this.observable$ = this.articlesService.getAllArticles();
    sqliteService.createDatabaseFile();
    this.sqliteService.saveAllArticles(this.observable$);
  }

提出建议后:

enter image description here

enter image description here

你能帮我吗?

提前致谢

1 个答案:

答案 0 :(得分:1)

此代码中存在异步问题:

sqliteService.createDatabaseFile();
this.sqliteService.saveAllArticles(this.observable$);

saveAllArticles可能会在createDatabaseFile之前调用,所以为什么会得到undefined db

解决方案是在服务的方法中返回一个promise(因为sqlite已经使用了promise),例如:

public createDatabaseFile(): Promise<SQLiteObject> {
    let promise = this.sqlite.create({
      name: DATABASE_FILE_NAME,
      location: 'default'
    });
    promise.then((db: SQLiteObject) => {
        this.db = db;
        this.createTables();
        console.log("Database créée");
    }).catch(e => console.log("Erreur : "+e));

    return promise;
}

public createTables(): Promise<void> {
    return this.db.executeSql(
      'CREATE TABLE IF NOT EXISTS all_articles...'
    ).then(()=> {
      return this.db.executeSql('CREATE TABLE IF NOT EXISTS all_articles ...')
    });
}

现在他们都回复了承诺,你可以使用:

this.observable$ = this.articlesService.getAllArticles();
sqliteService.createDatabaseFile().then( (db) => {
    this.sqliteService.createTables().then( () => {
       this.sqliteService.saveAllArticles(this.observable$);
    })
 });

如果您想更改saveAllArticles以使用promise:

public saveAllArticles(allArticles)
{
    // you need to import toPromise() 
    // import 'rxjs/add/operator/toPromise';
    return allArticles.toPromise().then(article => {
      return this.db.executeSql('INSERT INTO all_articles (...)')
    }).then(()=> {
      return this.db.executeSql('', {})
    })
}