延迟加载剑道网格的问题答案

【问题标题】：Issues with a lazy loading kendo grid延迟加载剑道网格的问题
【发布时间】：2017-01-24 11:20:55
【问题描述】：

您好，我在 kendo ui grid 中显示数据时遇到问题。当我在应用程序启动时直接加载模块时它工作正常，但是当我尝试通过延迟加载加载它时出现此错误：

无法设置未定义的属性“堆栈”

如果我从我的 html 中删除剑道网格，那么它会很好地加载页面的其余部分，但使用网格它总是会产生上述错误。

我假设问题是因为网格本身在加载时无法识别，但我不知道在哪里或如何修复它......另外，如果需要一些其他代码 sn-ps，我稍后会发布它们

包含网格的 HTML：

 <kendo-grid [data]="gridData"
      [pageSize]="displaySize"
      [skip]="currentPage"
      [pageable]="true"
      [height]="200"
      [sort]="sortArray"   
      [sortable]="{ mode: 'multiple' }"      
      (pageChange)="pageChange($event)"
      (sortChange)="sortChange($event)">
        <kendo-grid-column field="unit" title="Unit" width="100">
        </kendo-grid-column>
        <kendo-grid-column field="startingTime" title="Start Time" width="200">
        </kendo-grid-column>
        <kendo-grid-column field="endTime" title="End Time" width="200">
        </kendo-grid-column> 
         <kendo-grid-column field="coilId" title="Id" width="200">
        </kendo-grid-column>
         <kendo-grid-column field="thicknes" title="Thicknes" width="200">
        </kendo-grid-column>

    </kendo-grid>

网格模块：

    import { CommonModule }       from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { GridModule } from '@progress/kendo-angular-grid';

import {LoadCoil} from "./dataLoadService/loadCoil.service";
import {GridComponent} from "./grid.component";
import {RouterModule} from "@angular/router";

export const routerConfig = [{
        path: '',
        component: GridComponent
    }];

@NgModule({
  declarations: [   
    GridComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule.forChild(routerConfig)
  ],
  exports : [GridComponent],
  providers: [LoadCoil],
  bootstrap: []
})
export  default class AngGridModule { }

网格组件：

  public gridData: GridDataResult ;
    constructor(private _loadCoil : LoadCoil){

    }

    ngOnInit() : void{

        alert("onInit");
        this._loadCoil.getAllCoils().subscribe(coils =>{ this.coils = coils;
            this.gridData = {
                data: this.coils.slice(this.currentPage, this.currentPage + this.displaySize),
                total: this.coils.length};

                alert(this.coils.length);
            for(let i = 0; i < this.coils.length; i++){
                let isFound = false;
                for (let j = 0; j < this.dropDownArray.length; j++){
                    if (this.dropDownArray[j] == this.coils[i].unit){
                        isFound = true;
                        break;
                    }
                }

                if(!isFound){
                    this.dropDownArray.push(this.coils[i].unit);
                }
            }
        }); 

    }

主应用模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import {RouterModule} from "@angular/router";
import { GridModule } from '@progress/kendo-angular-grid';

export const routeConfig = [{
        path: 'grid',
        loadChildren: './angGrid.module'
    }];

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule, RouterModule.forRoot(routeConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

只是提醒这个问题，只有当我为我的模块切换到延迟加载时才会出现问题，如果我在应用程序启动时加载它，它就可以工作。

【问题讨论】：

标签： angular kendo-ui kendo-grid

【解决方案1】：

我发现，我在 ngmodule 导入数组中缺少我的 GridModule。

@NgModule({
  declarations: [   
    GridComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule.forChild(routerConfig),
    ***GridModule***
  ],
  exports : [GridComponent],
  providers: [LoadCoil],
  bootstrap: []
})

我不知道为什么错误消息系统的角度如此糟糕，或者我做错了什么我真的不知道了

编辑：我发现我总是收到一般错误的原因是 zone.js 依赖项：升级到最新版本（0.7.6）后，我收到“正常错误消息。也许会有所帮助某人。

【讨论】：