离子存储 - 获取数据给我 [object Object]

Question

我正在通过 Ionic Storage 存储一个 JSON 数组，如下所示：

this.storage.set('data', this.data).then().catch(err => {
  this.data.splice(this.data.indexOf(Data), 1);
});

并在函数中获取它：

fetchData(){
    this.storage.get('data').then(
      (data: {value: string, usage: string, date: string, addedDate: string}[]) => {
        this.data = data != null ? data : [];
        console.log('DATA FETCHED: ' + data);
        return data;
      }
    ).catch(err => {
      console.log(err);
    });
  }

我在数组中存储了 4 个对象，但是 console.log 只是返回给我：

DATA FETCHED: [object Object],[object Object],[object Object],[object Object]

我应该怎么做才能正确显示数组？我已经尝试过 .toString() 和 .slice()

home.html中的相关部分：

<ion-item *ngFor="let item of items">
    <h2>{{ item.usage }}</h2>
    <p>{{ item.date | date:'dd MMM yyyy' }}</p>
    <h1 item-end ngClass="{{ item.value.charAt(0) === '-' ? 'expense' : 'income' }}">{{ item.value }} €</h1>
    <!--<h1 item-end class="income">+ 450,00 €</h1>!-->
</ion-item>

home.ts:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items: any = this.moneyService.fetchData();

  incomeval: any = IncomevalPage;
  expenseval: any = ExpensevalPage;

  constructor(public navCtrl: NavController, private moneyService: MoneyService) {}

  ionViewWillEnter(){
    this.items = this.moneyService.fetchData();
  }
}

Answer 1

您需要对 home.ts 进行一些更正：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  items: any;
  moneyService: any;

  incomeval: any = IncomevalPage;
  expenseval: any = ExpensevalPage;

  constructor(public navCtrl: NavController, data: MoneyService) {
    this.items = null;
    this.moneyService = data;
  }

  ionViewWillEnter(){
    this.items = this.moneyService.fetchData();
  }
}

Answer 2

我认为，除了 Marco 在他的回答中所说的之外，问题在于您没有 return 从 fetchData() 中获取任何内容。 return 语句在承诺中。 Promises 可能需要一段时间才能习惯，但如果你 return 结果，它将是一个具有新值的新 promise。举个例子可能更容易理解：

var promise = Promise.resolve("first").then(val => "second");
promise.then(val => console.log("val is", val));
// Prints: "val is second"

您正在设置 MoneyService 的 this.data，但在 HomePage 组件的任何地方都无法访问它。

如果你把 fetchData 改成这样会怎么样：

fetchData(){
  return this.storage.get('data').then((data: {value: string, usage: string, date: string, addedDate: string}[]) => {
    return data != null ? data : [];
  });
}

它现在 return 一个承诺，你必须在 HomePage 中妥善处理它，也许是这样的（未经测试）：

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    items: any;

    incomeval: any = IncomevalPage;
    expenseval: any = ExpensevalPage;

    constructor(public navCtrl: NavController, private moneyService: MoneyService) {
        moneyService.fetchData().then(result => this.items = result);
    }
}

一有数据就会更新this.items。

离子存储 - 获取数据给我 [object Object]

Ionic storage - fetching data gives me [object Object]

ionic-framework

ionic-storage