如何使用Angular/Ionic Storage动态存储联系人数据？

我看了你的代码，问题出在没有正确存储和读取整个联系人数组，现在帮你一步步修正：

问题分析 #

你当前的代码里有两个关键错误：

• 存储时错误地尝试保存this.mContacts.name和this.mContacts.number，但mContacts是一个数组，本身没有这两个属性，你应该保存整个数组
• 读取数据后没有把值赋值回mContacts，所以组件初始化后还是用的默认空数组，自然看不到之前保存的数据

修正后的组件代码 #

import { Component, OnInit } from '@angular/core';
import { Contacts } from '@ionic-native/contacts/ngx';
import { Storage } from '@ionic/storage';

export class ContactComponentComponent implements OnInit {
  mContacts = [
    { id: 0, name: '', number: '' },
    { id: 1, name: '', number: '' },
    { id: 2, name: '', number: '' },
    { id: 3, name: '', number: '' },
    { id: 4, name: '', number: '' }
  ];

  constructor(private contacts: Contacts, private storage: Storage) {}

  ngOnInit() {
    // 组件初始化时读取存储的联系人数据
    this.getContact();
  }

  pickContact(contactId) {
    this.contacts.pickContact().then((contact) => {
      // 更新对应ID的联系人数据
      this.mContacts[contactId].name = contact.name.givenName;
      // 处理联系人无手机号的情况，避免报错
      this.mContacts[contactId].number = contact.phoneNumbers?.[0]?.value || '无手机号';
      
      // 存储整个联系人数组（用JSON.stringify转成字符串）
      this.storage.set('saved-contacts', JSON.stringify(this.mContacts))
        .then(() => console.log('联系人数据已保存'))
        .catch(err => console.error('保存失败:', err));
    });
  }

  getContact() {
    this.storage.get('saved-contacts')
      .then((val) => {
        if (val) {
          // 如果有存储的数据，解析后赋值给mContacts
          this.mContacts = JSON.parse(val);
          console.log('已加载保存的联系人:', this.mContacts);
        } else {
          // 第一次打开没有数据，使用默认数组
          console.log('无保存的联系人，使用默认数据');
        }
      })
      .catch(err => console.error('读取失败:', err));
  }
}

关键修改点 #

• 把mContacts里的id从数组改成普通数字（比如id: 0而不是id: [0]），这样pickContact里的contactId能正确匹配数组索引
• 存储时直接保存整个mContacts数组，用JSON.stringify把对象数组转成字符串（因为Ionic Storage只能存储字符串、数字、布尔等基础类型）
• 读取时用JSON.parse把字符串转回对象数组，并赋值给mContacts，这样组件的视图会自动更新
• 在ngOnInit里调用getContact，确保组件一加载就读取存储的数据

额外注意事项 #

• 确保你已经在app.module.ts里正确导入并配置了Ionic Storage：

  import { IonicStorageModule } from '@ionic/storage';
  
  @NgModule({
    imports: [
      // ...其他导入
      IonicStorageModule.forRoot()
    ]
  })
  export class AppModule {}
  

• 如果后续需要修改或删除联系人数据，记得重新调用this.storage.set('saved-contacts', JSON.stringify(this.mContacts))来更新存储

内容的提问来源于stack exchange，提问作者Mitchell Yuen