问题描述
你好:)我对编程很新,最近我开始使用IONIC App。但是我卡住了。我想做一些电话簿,你可以随机获得JSON联系人并将它们保存到你的sqlite数据库。
Hello there :) I am pretty new to programming and I recently started an IONIC App. However I got stuck. I want to do something like a phone book where you can get random JSON contacts and save them to your sqlite database.
我得到了这个:
import { Storage ] from '@ionic/storage';
@component({
selector: 'page-home'
templateUrl: 'home.html'
});
export class HomePage {
posts: any;
persons: any;
constructor(public navCtrl: NavController, public http: Http, public storage: Storage) {
this.http.get('https://jsonplaceholder.typicode.com/users').map(res=> res.json()).subscribe(data => {
this.posts = data;
});
}
//here i would like to recieve the data from the tapped Item
setData(){
console.log();
this.storage.set('myData', this.posts);
console.log(this.posts);
};
getData(){
this.storage.get('myData').then((data) => {
if (data !=null){
console.log(data);
}
})
};
}
以下是查看:
当我点击/点按保存时-button我想将值存储在我的sqlite数据库中,并将其显示在我的本地联系人中。
Here is the View:When i click / tap the save-button i would like to store the values in my sqlite-database and display them in my "local contacts".
<ion-content>
<ion-list>
<ion-item *ngFor="let post of posts">
<ion-list>
<ul><h1>{{post.name}}</h1></ul>
<ul><p>{{post.username}}, {{post.email}}</p></ul>
<ul><p>phone: {{post.phone}}</p></ul>
<button ion-button (click)="setData()">Set Data</button>
</ion-list>
</ion-item>
</ion-list>
</ion-content>
也许有人遇到类似的问题,可以帮助我解决这个问题。
谢谢:)
Maybe someone faced similar problems and can help me with this.Thanks :)
推荐答案
使用Ionic处理持久存储的最佳方法是使用。
The best way to handle persistent storage with Ionic is using ionic-storage.
Ionic Storage是由离子团队创建和维护的软件包,用于从每个浏览器或平台的细节中抽象开发,并自动使用最佳的存储解决方案。
Ionic Storage is a package created and maintained by the ionic team to abstract development from the specifics of each browser or platform and automatically use the best storage solution available.
在SQLite的情况下,您需要先安装Angular和Cordova的依赖项:
In your case for SQLite you need to first install the dependencies for both Angular and Cordova:
npm install @ ionic / storage --save
和
cordova插件添加cordova-sqlite-storage --save
然后在<$中编辑你的NgModule声明c $ c> src / app / app.module.ts 添加 IonicStorageModule
作为导入:
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [...],
imports: [
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql'],
})
],
bootstrap: [...],
entryComponents: [...],
providers: [...],
})
export class AppModule { }
import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public storage: Storage) {}
}
每当您访问存储时,请确保始终将代码包装在以下内容中:
Whenever you access storage, make sure to always wrap your code in the following:
storage.ready().then(() => { /* code here safely */});
3.1保存键值对
3.1 Saving a key-value pair
storage.ready().then(() => {
storage.set('some key', 'some value');
});
3.2检索值
3.2 Retrieving a value
storage.ready().then(() => {
storage.get('age').then((val: string) => {
console.log('Your age is', val);
});
});
3.3删除键值对
3.3 Deleting a key-value pair
storage.ready().then(() => {
storage.remove('key').then((key: string) => { /* do something after deletion */})
});
这篇关于如何将数据传递到我的SQLite-Database中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!