将数据添加到多个对象存储

时间:2019-11-14 13:52:58

标签: javascript angular indexeddb

使用Angular和ngx-indexed-db,我需要将数据添加到IndexedDB中的多个对象存储中。

我可以分别向商店添加数据,但是当我尝试依次向其各自的商店添加数据时,数据总是添加到最后设置的商店名称中。

我有这项服务来设置数据:

import { Injectable } from "@angular/core";

import { NgxIndexedDBService } from "ngx-indexed-db";

@Injectable({
  providedIn: "root"
})
export class OfflineDataService {
  constructor(private dbService: NgxIndexedDBService) {
    const data = [
      {
        dropdownList: [
          {
            id: 1,
            name: "Option 1"
          },
          {
            id: 2,
            name: "Option 2"
          }
        ],
        settings: [
          {
            id: 1,
            name: "Setting 1"
          },
          {
            id: 2,
            name: "Setting 2"
          }
        ]
      }
    ];

    this.setdropdownList(data[0].dropdownList);
    this.setSettings(data[0].settings);
  } 

  setdropdownList(dropdownList) {
      this.dbService.currentStore = "dropdownList";

      dropdownList.filter(item => {
        this.dbService.add(item);
      });
  }

  setSettings(settings) {
    this.dbService.currentStore = "settings";

    settings.filter(setting => {
      this.dbService.add(setting);
    });
  }
}

分别调用this.setdropdownList(data[0].dropdownList);this.setSettings(data[0].settings);可以正常工作,因此:

this.setdropdownList(data[0].dropdownList);
// this.setSettings(data[0].settings);

但是都叫他们两个...:

this.setdropdownList(data[0].dropdownList);
this.setSettings(data[0].settings);

...导致dropdownList数据被放入settings存储中,则IndexedDB将错误:

Error: Uncaught (in promise): Event: {"isTrusted":true}

在发生错误时,商店设置为settings

我试图做这样的事情:

this.setdropdownList(data[0].dropdownList)
    .then(() => {
      this.setSettings(data[0].settings);
    });

/* ... */

setdropdownList(dropdownList): Promise<any> {
    return new Promise(resolve => {
      console.log("Fired");
      this.dbService.currentStore = "dropdownList";

      dropdownList.filter(item => {
        this.dbService.add(item);
      });

      resolve();
    });
  }

/* ... */

调查了async/await,但仍然存在相同的问题。

这里是StackBlitz example

实现此目标的最佳方法是什么?

谢谢

0 个答案:

没有答案