问题
I followed this tutorial http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html
How ever when I run my project, the JIT encounter this error
The InteliSense also show the same error
I set up the SyncFusionModule
as Angular Module to export all "Syncfusion EJ 2 for Angular" components I'm planning to use in the BenchmarkModule
. The GridComponent
in
@syncfusion/ej2-ng-grids/src/grid/index
can be picked up by Angular; therefore, it is recognized as an Angular component. However, the datasouce
is not declared in 'GridComponent' but in its parent Grid
which is not Angular component but a standard one declared in @syncfusion\ej2-grids
. It seems like I missed an dependencies import somewhere to help Angular find the definition for Grid
. But I wasn't sure how to resolve this issue.
At first, I thought it's due to the fact that I skipped the SystemJS mapping which described in http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html#configuring-system-js; therefore, I raised this question Webpack solution for SystemJS mapping. But one of the answers suggested me it may not the reason.
Here is the GitHub repo https://github.com/lamLeX/IocPerformance/tree/gh-pages/IocPerformanceResultWebApp/src/app in case one would like to know how the files are structured to help me with the dependencies resolving because I don't have much experience in JS dependencies resolving; especially ES6 modules resolve.
Update from the answer: The trouble code is taken from this example http://ej2.syncfusion.com/angular/demos/#/grid/grouping and I have notified SyncFusion team about the bug in sample code.
<div class="control-section">
<ej-grid height="320" [datasource]="data" [groupsettings]="groupOptions" [allowgrouping]="true" allowsorting="true" allowpaging="true">
<e-columns>
<e-column field="Inventor" width="180" headertext="Inventor Name"></e-column>
<e-column field="NumberofPatentFamilies" width="220" textalign="right" headertext="Number of Patent Families"></e-column>
<e-column field="Country" width="140" headertext="Country"></e-column>
<e-column field="Active" width="120"></e-column>
<e-column field="Mainfieldsofinvention" width="200" headertext="Main fields of invention"></e-column>
</e-columns>
</ej-grid>
<div style="margin-top: 10px; text-align: right">Source:
<a href="https://en.wikipedia.org/wiki/List_of_prolific_inventors" target="_blank">Wikipedia: List of Prolific inventors</a>
</div>
</div>
回答1:
It is be ej2-ng-grids
, not ej2-grids
, and GridModule is right there. So it should be
import { NgModule } from '@angular/core';
import { GridModule, GridComponent, PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-ng-grids';
@NgModule({
imports: [GridModule],
exports: [GridModule],
declarations: [],
providers: [PageService, SortService, FilterService, GroupService]
})
export class SyncFusionModule { }
And there is no need to do that because this is already done in GridAllModule. It should be imported in application module instead of custom SyncFusionModule
.
Additionally, code above contains wrong inputs - datasource
, etc.They should be
dataSource` and so on, according to the documentation.
来源:https://stackoverflow.com/questions/45625642/dependencies-solving-for-gridcomponent-in-syncfusion-ej2-ng-grids