时间戳

首页 > 解决方案 > Angular/Ionic Storage，如何动态存储数据

angular - Angular/Ionic Storage，如何动态存储数据

问题描述

所以我有一些代码允许用户选择联系人并将数据解析为数组。但是，问题是无法永久存储该数据，因为用户离开组件时，数据就会消失。

我一直在尝试使用 Ionic 存储来存储该数据，但我缺乏如何正确执行此操作的知识。

这是相关的代码。

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);
    });
  }

}

这是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>

我知道这是糟糕的代码，但我不知道如何在用户选择并检索它之后保存这个数组，当组件被调用时

标签： angulartypescriptionic4ionic-storage

解决方案

我终于找到了答案，希望这对某人有所帮助。


  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);
      }
    });

  }


}

推荐阅读