Angular / Ionic Storage, как хранить данные динамически - PullRequest
Новая
       36

Angular / Ionic Storage, как хранить данные динамически

3 голосов
/ 09 октября 2019

Итак, у меня есть некоторый код, который позволяет пользователю выбрать контакт, и эти данные анализируются в массиве. однако проблема в том, что нет способа постоянного хранения этих данных, поскольку пользователь покидает компонент, данные исчезают.

Я пытался использовать хранилище 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>

Я знаю, что это ужасный код, но у меня естьне знаю, как сохранить этот массив после того, как пользователь выбрал его и получить, когда компонент вызывается

1 Ответ

1 голос
/ 09 октября 2019

Я наконец-то нашел ответ, надеюсь, это кому-нибудь поможет. 


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

  }


}
...