无法使用选项卡页上的提供程序查询角度和离子型数据库

我有一个主页,它是在 Ionic 3 和 Angular . 它有两个选项卡 Stats 和 Calc . 点击Stats页面调用类/组件 stats.ts (如下所示)。

此组件使用两个提供程序 CropProvider 和 ContractProvider 它查询数据库并获取一些记录。这些提供程序在其他页面上工作正常,能够成功地从sqlite db获取数据,但是通过选项卡式页面,我看到以下错误。

错误:

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)

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........");
    }
}

首页

<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>

家庭用品

@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

不知道我在这里遗漏了什么。我已经将它们注入到构造函数中了。