Отображение свойства компонента от поставщика записей не определено

Question

Я создаю ионное приложение. В этом модале я хочу выбрать с опциями, заполненными от моего провайдера (называется recordProvider). Категории должны содержать массив объектов из recordProvider. Свойство name этих объектов - это то, что входит в select.

Я могу регистрировать категории сразу после того, как он назначен от recordsProvider, и он отлично показывает все нужные записи. Тем не менее, следующая строка записывает длину в 0. Наиболее важно, ошибки пользовательского интерфейса с «Не удается прочитать свойство« имя »неопределенного» * ​​1003 *

1. Почему категории имеют это противоречивое значение?
2. Если это просто вопрос времени и категории будут иметь правильные данные в одно мгновение, почему они не обновляются в пользовательском интерфейсе? Разве это не в целом с Angular?
3. Как мне это исправить?

Модальные тс

    import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams,ViewController } from 'ionic- angular';
    import { RecordsProvider } from './../../providers/records/records';

    @IonicPage()
    @Component({
      selector: 'page-add-modal',
      templateUrl: 'add-modal.html',
    })
    export class AddModalPage {
      categories:object[] = [];

      constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl : ViewController, public recordProvider: RecordsProvider) {
      }

      ngOnInit() {
        this.categories = this.recordProvider.getAllExpenseCategories();
        console.log(this.categories);
        console.log(this.categories.length);
      }

      public closeModal(){
        this.viewCtrl.dismiss();
      }
    }

Модальный HTML

    <ion-content padding>
    <h1 (click)="getCat()">Hello</h1>
    <p>{{categories[0].name}}</p>
    <ion-item>
      <ion-label>categories</ion-label>
      <ion-select>
          <ion-option ng-repeat="obj of categories" value="{{obj.name}}">{{obj.name}}</ion-option>
      </ion-select>
    </ion-item>
    </ion-content>

РЕДАКТИРОВАТЬ RecordsProvider

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class RecordsProvider {

  getAllExpenseCategories(){
    let categories = [];
    this.storage.forEach( (value, key, index)=>{
      if(key.indexOf("Exp") == 0){
        categories.push(value);
      }
    });
    return categories;
  }
}

Answer 1

Ионическое хранилище (localForage) использует асинхронный API, поэтому я должен убедиться, что вы напишите свои методы с ним соответствующим образом, я бы переписал getAllExpenseCategories, чтобы использовать обещание, возвращаемое хранилищем:

  getAllExpenseCategories(){
    let categories = [];
    this.storage.forEach( (value, key, index)=>{
      if(key.indexOf("Exp") == 0){
        categories.push(value);
      }
    }).then(()=>{
        return categories;
    })
  }

В вашем случае кажется, что ваш метод возвращал компоненту пустой массив до того, как хранилище завершило цикл forEach.

Дайте мне знать, помогло ли это