我正在使用syncfusion ejs-multiselect控件作为Ag-grid中的自定义单元格编辑器。在这种情况下，更改多选值并单击某些其他单元格不会触发更改事件。如果从Ag-grid中单击，更改事件将如何被触发。 （我在现有项目中使用） 与创建新项目并尝试相同的情况一样，它可以正常工作。 以下是package.json文件（如果有任何版本问题）
package.json：
{
"name": "portal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular-devkit/core": "0.0.29",
"@angular-devkit/schematics": "^7.1.1",
"@angular/animations": "~7.2.0",
"@angular/cdk": "^7.1.1",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/http": "^6.0.3",
"@angular/material": "^6.2.1",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@markpieszak/ng-application-insights": "^7.0.3",
"@syncfusion/ej2-angular-calendars": "^17.2.49",
"@syncfusion/ej2-angular-dropdowns": "^17.3.14",
"@syncfusion/ej2-angular-inputs": "^17.2.52",
"@syncfusion/ej2-angular-richtexteditor": "^17.1.43",
"ag-grid-angular": "^21.2.2",
"ag-grid-community": "^21.2.2",
"ag-grid-enterprise": "^21.2.2",
"angular2-uuid": "^1.1.1",
"applicationinsights-js": "^1.0.19",
"bootstrap": "^3.3.7",
"core-js": "^2.5.4",
"indexeddb-angular": "^0.1.8",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"ng2-slim-loading-bar": "^4.0.0",
"ngx-breadcrumbs": "0.0.3",
"ngx-cookie-service": "^1.0.10",
"ngx-drag-drop": "^2.0.0",
"ngx-monaco-editor": "^6.0.0",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.2.2",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.110",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"sonarqube-scanner": "^2.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
代码是正常的： app.component 包括ag-grid：
HTML file:
<ag-grid-angular
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
[singleClickEdit]="true"
>
</ag-grid-angular>
TS File:
export class AppComponent {
holdValue:any=["Hello"];
ngOnInit(): void {
//throw new Error("Method not implemented.");
}
private frameworkComponents;
columnDefs = [
{headerName: 'Make', field: 'make', editable: true, cellEditor:'multi',width:300, cellEditorParams: this.holdValue },
{headerName: 'Model', field: 'model', editable: true,cellEditor:'text',width:300, cellEditorParams: this.holdValue },
{headerName: 'Price', field: 'price', editable: true}
];
rowData = [
{ make: '', model: 'Celica', price: 35000 },
{ make: '', model: 'Mondeo', price: 32000 },
{ make: '', model: 'Boxter', price: 72000 }
];
constructor() {
this.frameworkComponents ={
multi: MulticomponentComponent
}
}
}
自定义单元格编辑器使用的“ MulticomponentComponent”具有以下代码：
HTML file:
<ejs-multiselect id='multiselectelement' [dataSource]='sportsData' [fields]='fields' [(value)]="value"
[placeholder]='placeholder' (change)="OnChange($event)"></ejs-multiselect>
TS File:
export class MulticomponentComponent implements ICellEditorAngularComp, AfterViewInit {
value:any=[];
public sportsData: Object[] = [
{ id: 'Game1', sports: 'Badminton' },
{ id: 'Game2', sports: 'Basketball' },
{ id: 'Game3', sports: 'Cricket' },
{ id: 'Game4', sports: 'Football' },
{ id: 'Game5', sports: 'Golf' }
];
// maps the appropriate column to fields property
public fields: Object = { text: 'sports', value: 'id' };
public placeholder: string = 'Select games';
ngAfterViewInit(): void {
}
getValue() {
return this.value;
}
agInit(params: import("ag-grid-community").ICellEditorParams): void {
}
OnChange(e){
console.log("change occur");
console.log(this.value);
}
}
答案 0 :(得分：0)
此问题的原因是您单击其他网格单元时多选控件被破坏，因为Ag-Grid破坏了该控件。因此，那时除破坏事件外，没有其他事件会触发。因此，如果您需要在单击另一个网格单元时执行任何操作，则可以使用destroy事件。
public static void main(String[] args) throws IOException {
Path csvPath = Paths.get("path/to/file.csv");
List<List<String>> master = Files.lines(csvPath)
.skip(1).parallel()
.map(line -> Arrays.asList(line.split(",")))
.collect(Collectors.toList());
}
此外，当您单击ag-grid的外部时，该控件没有被破坏。因此，那时将触发更改事件。