如何将数据数组对象保存到离子 SQlite 存储(TypeScript、Angular 5、Ionic 3) [英] How to save a data array object to ionic SQlite storage (TypeScript, Angular 5, Ionic 3)
问题描述
我正在尝试使用 Ionic SQlite 存储将具有许多属性的数据数组对象保存到收藏夹列表中.
例如,我在数据提供者中有一个数据数组:
data.ts
私有选项:any[] = [{"name": "选项 01","网站": "www.google.com","about": "选择这个选项 01",id":1"},{"name": "选项 02","网站": "www.yahoo.com","about": "选择这个选项 02",id":2"},{"name": "选项 03","网站": "www.bing.com","about": "选择这个选项 03",id":3"},{"name": "选项 04","网站": "www.stackoverflow.com","about": "选择这个选项 04",id":4"}]
并且我在我的主页 html 页面中调用这些数据对象,该页面具有保存到收藏夹列表的选项.
<h1>{{option.name}}</h1><h1>{{option.about }}</h1><h4>{{option.website}}</h4><button ion-button block (click)="saveToFavorite()">保存到收藏夹列表</button><button ion-button block (click)="removeFromFavorite()">从收藏列表中删除</button></ion-card>
这里是不完整的home.ts文件
import { Storage } from '@ionic/storage';const STORAGE_KEY = 'favoriteOptions';saveToFavorite(选项){this.storage.set();}removeFromFavorite(选项){this.storage.remove();}
我希望 saveToFavorite() 将选项数据数组对象保存到收藏夹选项存储键,以便我可以将它们全部加载到 favoriteList HTML 页面:
<div *ngFor="让选项的选项"><h1>{{option.name}}</h1><p>{{option.about}}</p><button ion-button block (click)="removeFromFavorite()">从收藏列表中删除</button>
</离子含量>
favoriteList ts 文件:
getAllFavoriteOptions() {返回 this.storage.get(STORAGE_KEY);}removeFromFavorite(选项){this.storage.remove();}
不知怎的,我有点迷失了.请更正我在 ts 文件上的代码.
提前致谢!
制作收藏夹功能:
addFavorite(favorite:any):void{让收藏夹 = this.storage.get('收藏夹');如果(收藏夹){收藏夹.推(最喜欢的);this.storage.set('收藏夹', 收藏夹);}别的{收藏夹 = [];收藏夹.推(最喜欢的);this.storage.set('收藏夹',收藏夹);}
然后要获得收藏夹添加此功能:
getFavorites():any{让收藏夹 = this.storage.get("收藏夹");返回收藏夹;}
对于离子:如果您使用 @ionic/storage
然后加载项目使用 异步管道:
getFavorites():Promise{让收藏夹 = this.storage.get("收藏夹");返回收藏夹;}
然后在 *ngFor 中访问它们:
<div>{{item.name}}</div>
I'm trying to save a data array object with many attributes to a favorite list using Ionic SQlite storage.
For instance, I have a data array in data provider:
data.ts
private options: any[] = [
{
"name": "option 01",
"website": "www.google.com",
"about": "choose this option 01",
"id": "1"
},
{
"name": "option 02",
"website": "www.yahoo.com",
"about": "choose this option 02",
"id": "2"
},
{
"name": "option 03",
"website": "www.bing.com",
"about": "choose this option 03",
"id": "3"
},
{
"name": "option 04",
"website": "www.stackoverflow.com",
"about": "choose this option 04",
"id": "4"
}
]
and I'm calling these data objects in my home html page which has an option to save to favorite list.
<ion-card *ngFor="let option of options">
<h1>{{option.name}}</h1>
<h1>{{option.about }}</h1>
<h4>{{option.website}}</h4>
<button ion-button block (click)="saveToFavorite()">Save to Favorite List</button>
<button ion-button block (click)="removeFromFavorite()">Remove from Favorite List</button>
</ion-card>
and here's incomplete home.ts file
import { Storage } from '@ionic/storage';
const STORAGE_KEY = 'favoriteOptions';
saveToFavorite(option) {
this.storage.set();
}
removeFromFavorite(option) {
this.storage.remove();
}
I want saveToFavorite() will save option data array object to a favorite options storage key so I can load them all up on a favoriteList HTML page:
<ion-content>
<div *ngFor="let option of options">
<h1>{{option.name}}</h1>
<p>{{option.about}}</p>
<button ion-button block (click)="removeFromFavorite()">Remove from Favorite List</button>
</div>
</ion-content>
favoriteList ts file:
getAllFavoriteOptions() {
return this.storage.get(STORAGE_KEY);
}
removeFromFavorite(option) {
this.storage.remove();
}
Somehow I'm kinda lost. Please correct my codes on ts files.
Thanks in advance!
make a function to save the favorites:
addFavorite(favorite:any):void{
let favorites = this.storage.get('favorites');
if(favorites){
favorites.push(favorite);
this.storage.set('favorites', favorites);
}else{
favorites = [];
favorites.push(favorite);
this.storage.set('favorites',favorites);
}
then to get favorites add this function:
getFavorites():any{
let favorites = this.storage.get("favorites");
return favorites;
}
for ionic: if you are using @ionic/storage
then to load items use async pipe:
getFavorites():Promise<any>{
let favorites = this.storage.get("favorites");
return favorites;
}
then to access them in *ngFor do this:
<div *ngFor="let item of getFavorites() | async">
<div>{{item.name}}</div>
</div>
这篇关于如何将数据数组对象保存到离子 SQlite 存储(TypeScript、Angular 5、Ionic 3)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!