延迟加载kendo网格的问题

时间:2017-01-24 11:20:56

标签: angular kendo-ui kendo-grid

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

  

无法设置属性' stack'未定义的

如果我从我的html中删除了kendo网格,那么它会加载页面的其余部分,但是对于网格,它总是会产生上述错误。

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

包含网格的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 { }

只是提醒问题只发生在我为我的模块切换到延迟加载时,如果我在应用程序启动它加载它工作。

1 个答案:

答案 0 :(得分:3)

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

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

我不知道为什么错误信息系统在角度上是如此糟糕,或者我做错了什么我真的不知道

编辑:我找到了为什么我总是得到一般错误的原因而且是zone.js依赖:在我升级到最新版本(0.7.6)之后,我得到了#34;正常的错误消息。也许它会帮助别人。