ionic2存储存储中的对象数组

时间:2018-05-03 16:59:01

标签: javascript angular ionic-framework

我在ionic2存储中遵循以下示例:https://ionicframework.com/docs/storage/

我从表单页面获取对象参数,将其添加到myBOTs变量并保存整个对象数组,以便在页面刷新时使用它来填充列表。

我在构造函数中所做的只是调用存储来查找填充列表的当前值。

id: any;
icons: string[];
myBOTs: Array <{type: string,BOTdate: string, setReminder: boolean, icon: string}>;

constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
    this.myBOTs=[];
    this.storage.get('myBOTs').then((values)=>{
        if(values!==null){
            for(let i = 0;i < values.length;i++){
                this.myBOTs.push({
                    type: values[i].type,
                    BOTdate: values[i].BOTdate,
                    icon: this.icons[Math.floor(Math.random() * this.icons.length)],
                    setReminder: values[i].setReminder
                })
            }               
        }
    })
}

问题出在 this.storage.set('myBOTs',this.myBOTs)的下方。当我尝试在.set之后检索数据的console.log(values)时,只保存数组的最后一个对象。

我想也许离子存储无法在.set中存储对象数组?或者如果不是,那似乎是什么问题?

ionViewDidLoad(){
    if(this.navParams.get('type')!==undefined){
        let addedBOT = [];
        addedBOT['type'] = this.navParams.get('type');
        addedBOT['BOTdate'] = this.navParams.get('BOTdate');
        addedBOT['setReminder'] = this.navParams.get('setReminder');
        this.myBOTs.push({
            type: addedBOT['type'],
            BOTdate: addedBOT['BOTdate'],
            icon: this.icons[1],
            setReminder: addedBOT['setReminder']
        })
        this.storage.set('myBOTs',this.myBOTs);
        this.storage.get('myBOTs').then((values)=>{
            console.log(values);
        })          
    }
}

1 个答案:

答案 0 :(得分:0)

我已经解决了。

问题在于构造函数和ionViewDidLoad在页面加载时异步调用。这导致从表单页面推送的数据在获取结果之前首先添加到this.myBOTs,并从构造函数列表中的存储加载。

所以这是我的解决方案。我所做的是将代码添加到函数中,并在将表单数据添加到列表之前向我的列表生成函数添加回调。

id: any;
icons: string[];
myBOTs: Array <{type: string,BOTdate: string, setReminder: boolean, icon: string}>;

constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
    this.myBOTs=[];
    let e = this;
    this.generate_list(function(){
        e.add_item();
    })
}

列表生成功能,用于设置存储中的前一个列表项。

generate_list(callback){
    this.storage.get('myBOTs').then((values)=>{
        if(values!==null){
            for(let i = 0;i < values.length;i++){
                this.myBOTs.push({
                    type: values[i].type,
                    BOTdate: values[i].BOTdate,
                    icon: this.icons[Math.floor(Math.random() * this.icons.length)],
                    setReminder: values[i].setReminder
                })
            }               
        }
        callback();
    })
}

然后从navParams

的数据中添加新项目
add_item(){
    if(this.navParams.get('type')!==undefined){
        let addedBOT = [];
        addedBOT['type'] = this.navParams.get('type');
        addedBOT['BOTdate'] = this.navParams.get('BOTdate');
        addedBOT['setReminder'] = this.navParams.get('setReminder');
        this.myBOTs.push({
            type: addedBOT['type'],
            BOTdate: addedBOT['BOTdate'],
            icon: this.icons[1],
            setReminder: addedBOT['setReminder']
        })
        this.storage.set('myBOTs',this.myBOTs);
        console.log('storage added');        
    }    
}

完美无缺。可能会帮助某人,因为这是一种非常常见的情况。