Невозможно запросить базу данных в Angular и Ionic с помощью поставщика на странице с вкладками

Question

У меня есть домашняя страница, которая представляет собой страницу с вкладками, разработанную в Ionic 3 и Angular.Имеет две вкладки Stats и Calc.Щелчок на странице статистики вызывает класс / компонент stats.ts (показан ниже).

Этот компонент использует два поставщика CropProvider и ContractProvider, которые запрашивают БД и извлекают некоторые записи.Эти провайдеры просто отлично работают на других страницах и могут успешно извлекать данные из БД SQLite, но на страницах с вкладками я вижу следующую ошибку.

Ошибка:

Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at StatsPage.webpackJsonp.168.StatsPage.buildStats (http://192.168.0.5:8100/build/main.js:707:51)
    at new StatsPage (http://192.168.0.5:8100/build/main.js:690:14)
    at createClass (http://192.168.0.5:8100/build/vendor.js:13176:20)
    at createDirectiveInstance (http://192.168.0.5:8100/build/vendor.js:13011:37)
    at createViewNodes (http://192.168.0.5:8100/build/vendor.js:14469:53)
    at createRootView (http://192.168.0.5:8100/build/vendor.js:14358:5)
    at callWithDebugContext (http://192.168.0.5:8100/build/vendor.js:15783:42)
    at Object.debugCreateRootView [as createRootView] (http://192.168.0.5:8100/build/vendor.js:15066:12)
    at ComponentFactory_.create (http://192.168.0.5:8100/build/vendor.js:11963:46)
    at ComponentFactoryBoundToModule.create (http://192.168.0.5:8100/build/vendor.js:4715:29)
    at c (http://192.168.0.5:8100/build/polyfills.js:3:19752)
    at c (http://192.168.0.5:8100/build/polyfills.js:3:19461)
    at http://192.168.0.5:8100/build/polyfills.js:3:20233
    at t.invokeTask (http://192.168.0.5:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://192.168.0.5:8100/build/vendor.js:5436:33)
    at t.invokeTask (http://192.168.0.5:8100/build/polyfills.js:3:15581)
    at r.runTask (http://192.168.0.5:8100/build/polyfills.js:3:10834)
    at o (http://192.168.0.5:8100/build/polyfills.js:3:7894)
    at e.invokeTask [as invoke] (http://192.168.0.5:8100/build/polyfills.js:3:16823)
    at p (http://192.168.0.5:8100/build/polyfills.js:2:27648)

Stats.ts

   @IonicPage()
    @Component({
      selector: 'page-stats',
      templateUrl: 'stats.html',
    })
    export class StatsPage implements OnInit {
      crops: Crop[];
      crop = {} as Crop;
      contracts: Contract[];
      contract = {} as Contract;
      stats = {} as Stats;
      contentEle: any;
      textEle: any;
      @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
      @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;

      constructor(public navCtrl: NavController, private popoverCtrl: PopoverController,
                  private cropProvider: CropProvider,
                  private contractProvider: ContractProvider) {
        console.log("Into the stats page........");
        console.log("cropProvider: " + cropProvider);
        console.log("contractProvider: " + contractProvider);
        this.cropProvider.getAllCrops()
          .then((crops: Crop[]) => {
            this.crops = crops;
          })
          .catch(e => console.error(e));

        this.contractProvider.getAllContracts()
          .then((contracts: Contract[]) => {
            this.contracts = contracts;
          })
          .catch(e => console.error(e));

        this.buildStats();
      }

    buildStats() {
        console.log("crops:" + this.crops);
        console.log("contracts:" + this.contracts);

        for (let crop of this.crops) {
          this.stats.cropName = crop.cropName;
          this.stats.grossMarketable = crop.acres * crop.expectedAPH;
          this.stats.aphMarketable = crop.acres * crop.guaranteedAPH;
        }
        console.log("cropName: " + this.stats.cropName);
        console.log("grossMarketable: " + this.stats.grossMarketable);
        console.log("grossMarketable: " + this.stats.aphMarketable);

        for (let contract of this.contracts) {
          this.stats.amountSold = contract.contractTotalBushels;
          this.stats.percentageGross = (this.stats.amountSold / this.stats.grossMarketable) * 100;
          this.stats.percentageAPH = (this.stats.amountSold / this.stats.aphMarketable) * 100;
          this.stats.avgSold = (this.contract.contract1Total + this.contract.contract2Total + this.contract.contract3Total) /
            (this.contract.contract1Price + this.contract.contract2Price + this.contract.contract3Price);
        }
        console.log("amountSold: " + this.stats.amountSold);
        console.log("percentageGross: " + this.stats.percentageGross);
        console.log("percentageAPH: " + this.stats.percentageAPH);
        console.log("avgSold: " + this.stats.avgSold);
        console.log("stats: " + this.stats);
      }

    ngOnInit(): void {
       console.log("Into the ngOnInit page........");
    }
}

home.html

<ion-tabs color="primary">
  <ion-tab [root]="tab1Root" tabIcon="stats" tabTitle="Stats"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="calculator" tabTitle="Calculations"></ion-tab>
</ion-tabs>

home.ts

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

  tab1Root = StatsPage;
  tab2Root = CalcPage;

}

Журналы консоли:

[app-scripts] [23:20:57]  console.log: Into the stats page........
[app-scripts] [23:20:57]  console.log: cropProvider: [object Object]
[app-scripts] [23:20:57]  console.log: contractProvider: [object Object]
[app-scripts] [23:20:57]  console.log: crops:undefined
[app-scripts] [23:20:57]  console.log: contracts:undefined

Не уверен, что мне здесь не хватает.Я уже ввел их в конструктор.

Answer 1

Вы должны инициализировать все свойства crops и contracts, прежде чем заполнять их некоторыми значениями.Так как я не знаю свойств crops.Я не могу показать, как инициализировать все свойства массива.Но для обычного массива ниже будет работать инициализация.

this.crops = [];
this.contracts = [];

Итак, ваш код будет выглядеть следующим образом:

...
console.log("Into the stats page........");
console.log("cropProvider: " + cropProvider);
console.log("contractProvider: " + contractProvider);

this.crops = [];
this.contracts = [];

this.cropProvider.getAllCrops()
  .then((crops: Crop[]) => {
    this.crops = crops;
  })
  .catch(e => console.error(e));
...

---

К вашему сведению: Нехорошо иметь бизнес-логику в конструкторе.