我们正在使用（希望能够使用）Angular 4与全面服务Kendo Grid（过滤，排序，分页等）。简单的网格和分页一样，但是当我尝试添加过滤时，我得到以下内容：
Unhandled Promise rejection: Template parse errors:
Can't bind to 'filter' since it isn't a known property of 'kendo-grid'.
1. If 'kendo-grid' is an Angular component and it has 'filter' input, then verify that it is part of this module.
2. If 'kendo-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [pageSize]="state.take"
[skip]="state.skip"
[ERROR ->][filter]="state.filter"
[pageable]="true"
[filterab"): ng:///app/securityGroupComponent.html@26:24
Can't bind to 'filterable' since it isn't a known property of 'kendo-grid'...
我无法确定我的设置和文档之间的区别。感谢您提供的任何帮助。
import { Component } from '@angular/core';
import { process, State } from '@progress/kendo-data-query';
import {
GridComponent,
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';
@Component({
selector: 'test',
template: `
<kendo-grid
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"
>
<kendo-grid-column field="ProductID" title="ID" width="40" [filterable]="false">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="FirstOrderedOn" title="First Ordered On" width="240" filter="date" format="{0:d}">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="180" filter="numeric" format="{0:c}">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="120" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class test {
private state: State = {
skip: 0,
take: 5
};
private sampleProducts = [
{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 8, 20)
},
{
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 7, 12)
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 8, 26)
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 7, 17)
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
}]
private gridData: GridDataResult = process(this.sampleProducts, this.state);
protected dataStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.gridData = process(this.sampleProducts, this.state);
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { SecurityGroupService } from "./services/securityGroupService";
import { SecurityGroupComponent } from "./securityGroupComponent";
import { AppComponent } from './app.component';
import { GridModule } from '@progress/kendo-angular-grid/';
import { test } from './test';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
@NgModule({
imports: [
BrowserModule,
ButtonsModule,
CommonModule,
GridModule,
FormsModule,
HttpModule
],
declarations: [
AppComponent,
SecurityGroupComponent,
test
],
bootstrap: [AppComponent],
providers: [SecurityGroupService]
})
export class AppModule { }
答案 0 :(得分：0)
请确保GridModule是在声明和使用“test”组件的同一模块中导入的。例如，在Grid component installation instructions中只使用了一个模块--AppModule，AppComponent和GridModule都在那里导入，并且也分别包含在“declarations”和“imports”数组中。