Angular 如果在Ag网格自定义单元格编辑器中使用syncfusion ejs multiselect控件，则不会触发更改事件

我使用syncfusion ejs multiselect控件作为Ag网格中的自定义单元格编辑器。在这种情况下，更改多选值并单击其他单元格时，不会触发更改事件。如果从Ag网格中单击，则会触发更改事件。（我在现有项目中使用） 就像创建一个新项目并尝试相同的项目一样，它工作得很好。 以下是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"
      }
    }

代码正常： 应用程序组件包括ag网格：

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
        }
        }
    }

HTML文件：
TS文件：
导出类AppComponent{
holdValue:any=[“Hello”]；
ngOnInit（）：void{
//抛出新错误（“方法未实现”）；
}
私有框架组件；
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'，字段：'Price'，可编辑：true}
];
行数据=[
{品牌：''，型号：'Celica'，价格：35000}，
{品牌：''，型号：'蒙迪欧'，价格：32000}，
{品牌：''，型号：'Boxter'，价格：72000}
];
构造函数（）{
这是一个框架组件={
多组分：多组分
}
}
}

自定义单元格编辑器使用的“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);
  }
}

HTML文件：
TS文件：
导出类MulticomponentComponent实现ICellEditorAngularComp，AfterViewInit{
值：any=[]；
公共体育数据：对象[]=[
{id:'Game1'，体育：'羽毛球'}，
{id:'Game2'，体育：'Basketball'}，
{id:'Game3'，sports:'Cricket'}，
{id:'Game4'，体育：'Football'}，
{id:'Game5'，sports:'Golf'}
];
//将适当的列映射到“字段”属性
公共字段：对象={text:'sports'，value:'id'}；
公共占位符：字符串='选择游戏'；
ngAfterViewInit（）：void{
}
getValue（）{
返回此.value；
}
agInit（参数：导入（“ag网格社区”）.ICellEditorParams）：无效{
}
OnChange（e）{
控制台日志（“发生更改”）；
console.log（this.value）；
}
}

问题的原因是，当您单击其他网格单元时，multiselect控件被破坏，因为Ag grid破坏了该控件。所以，在那个时候，除了destroy事件之外，不会触发任何事件。因此，如果在单击另一个网格单元时需要执行任何操作，则可以使用销毁事件

<ejs-multiselect id='multiselectelement' [dataSource]='sportsData' [fields]='fields' [(value)]="value" [placeholder]='placeholder' (select)="select($event)" (destroyed)="onDestroyed($event)" (change)="OnChange($event)"></ejs-multiselect> 

此外，当您单击ag网格的外部时，控件不会被破坏。因此，届时将触发更改事件