[英]Angular/Ionic Storage, how to store data dynamically
So I have some code that allows a user to pick a contact and that data gets parsed into an array.所以我有一些代码允许用户选择联系人并将数据解析为数组。 however, the problem is there is no way of storing that data permanently, as the user leaves the component the data disappears.
但是,问题是无法永久存储该数据,因为用户离开组件时,数据就会消失。
I have been trying to use Ionic storage to store that data, but my knowledge is lacking in how to do this properly.我一直在尝试使用 Ionic 存储来存储该数据,但我缺乏如何正确执行此操作的知识。
here is the relevant code.这是相关的代码。
export class ContactComponentComponent implements OnInit {
constructor(private contacts: Contacts, private storage: Storage) {
this.getContact();
}
mContacts = [
{
id: [0],
name: '',
number: ''
},
{
id: [1],
name : [''],
number: ['']
},
{
id: [2],
name : [''],
number: ['']
},
{
id: [3],
name : [''],
number: ['']
},
{
id: [4],
name : [''],
number: ['']
}
];
ngOnInit() {}
pickContact(contactId) {
this.contacts.pickContact().then((contact) => {
this.mContacts[contactId].name = contact.name.givenName;
this.mContacts[contactId].number = contact.phoneNumbers[0].value;
this.storage.set('contact-name', JSON.stringify(this.mContacts.name));
this.storage.set('contact-number', JSON.stringify(this.mContacts.number));
});
}
getContact()
{
this.storage.get('contact-name').then((val) => {
console.log('Contact Name: ', val);
});
this.storage.get('contact-number').then((val) => {
console.log('Contact Number:', val);
});
}
}
Here is the HTML这是 HTML
<ion-list>
<ion-grid>
<ion-row>
<ion-col>
<ion-item-group *ngFor="let contacts of mContacts">
<ion-card (click) = "pickContact(contacts.id)">
<ion-item lines = "none">
<ion-label class="ion-text-wrap">Name: {{contacts.name}}</ion-label>
</ion-item>
<ion-item lines = "none" >
<ion-label class="ion-text-wrap">Number: {{contacts.number}}</ion-label>
</ion-item>
</ion-card>
</ion-item-group>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
I know this is terrible code, but I have no idea how to save this array after the user has selected it and retrieve it, when the component is called我知道这是糟糕的代码,但我不知道如何在用户选择并检索它之后保存这个数组,当组件被调用时
I finally discovered an answer, Hope this helps someone.我终于找到了答案,希望这对某人有所帮助。
constructor(private contacts: Contacts, private storage: Storage) {
this.getContact();
}
key:string = "contacts";
mContacts = [
{
id: [0],
name: '',
number: ''
},
{
id: [1],
name : [''],
number: ['']
},
{
id: [2],
name : [''],
number: ['']
},
{
id: [3],
name : [''],
number: ['']
},
{
id: [4],
name : [''],
number: ['']
}
];
ngOnInit() {}
pickContact(contactId) {
this.contacts.pickContact().then((contact) => {
this.mContacts[contactId].name = contact.name.givenName;
this.mContacts[contactId].number = contact.phoneNumbers[0].value;
this.saveContacts();
});
}
saveContacts(){
this.storage.set(this.key, JSON.stringify(this.mContacts));
}
getContact()
{
this.storage.get(this.key).then((val) => {
console.log('Contact Name: ', val);
if (val != null && val !== undefined) {
this.mContacts = JSON.parse(val);
}
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.