0
私はCapPageからArchivesPageにデータを渡し、sqliteデータベースに挿入しようとしています。アンドロイドコンソールによると、それは動作します。問題は、ArchivesPageがデータベースコンテンツを表示するために読み込まれないことです。ページ間のナビゲーション処理の問題ではありません。なぜなら、データベースに関連するコードを削除すると、ArchivesPageはロードされますが空になるからです。ここでsqliteデータベースによってページが読み込まれない（イオン3）
はcap.tsコードです：ここで
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ArchivesPage } from '/home/stephane/test_ionic/myApp1/src/pages/archives/archives';
@IonicPage()
@Component({
selector: 'page-cap',
templateUrl: 'cap.html',
})
export class CapPage {
constructor(public navCtrl: NavController, public navParams: NavParams) { }
ionViewDidLoad() {
console.log('ionViewDidLoad CapPage');
}
openArchives(value) {
console.log(value);
this.navCtrl.push('ArchivesPage', value);
}
}
はarchives.tsコードです：
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
@IonicPage()
@Component({
selector: 'page-archives',
templateUrl: 'archives.html',
})
export class ArchivesPage {
private db: SQLiteObject;
archives: any = [];
date;
duree;
distance;
FC;
constructor(public navCtrl: NavController, public navParams: NavParams, private sqlite: SQLite) {
this.date=this.navParams.get('date');
this.duree=this.navParams.get('duree');
this.distance=this.navParams.get('d');
this.FC=this.navParams.get('FC');
this.createDatabaseFile();
this.insertWorkout();
this.displayWorkout();
}
ionViewDidLoad() {
console.log('ionViewDidLoad ArchivesPage');
console.log(this.date);
}
/*ionViewWillEnter(){
//this.archives = this.archivesService.getArchives();
}*/
private createDatabaseFile(): void{
this.sqlite.create({
name: 'dataSports.db',
location: 'default'
})
.then((db: SQLiteObject) => {
console.log('Bdd créée !');
this.db=db;
this.createTables();
})
.catch(e => console.log(e));
}
private createTables(): void{
this.db.executeSql('CREATE TABLE IF NOT EXISTS cap (idCAP INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, date TEXT NOT NULL, duree TEXT NOT NULL, distance INTEGER NOT NULL,FC INTEGER NOT NULL)', {})
.then(() => {
console.log('Table created!');
this.insertWorkout();
})
.catch(e => console.log(e));
}
private insertWorkout(): void{
this.db.executeSql('INSERT INTO cap (date, duree, distance, FC) VALUES (?,?,?,?)',[this.date,this.duree,this.distance,this.FC])
.then(() => {
console.log('archives insérée!');
this.displayWorkout();
})
.catch(e => console.log(e));
}
private displayWorkout(): void{
console.log("display lancée");
this.db.executeSql('SELECT * FROM cap', {})
.then((data) => {
if(data==null){
console.log('pas de données !');
return;
}
if(data.rows){
if(data.rows.length>0){
console.log('des données !');
for(var i=0;i<data.rows.length;i++){
this.archives.push(data.rows.item(i).distance);
console.log(this.archives[i]);
}
}
}
})
}
}
そしてarchives.htmlコード：
<ion-header>
<ion-navbar color="danger">
<ion-title>archives</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list *ngIf="archives">
<ion-item *ngFor="let archive of archives">
<ion-label>{{archive}} </ion-label>
</ion-item>
</ion-list>
</ion-content>
質問archives.htmlにデータベースからのデータを表示する方法は？ （私はイオンの初心者です）ありがとうございます。