Question

我一直在努力使简单的侦听器在Ag-grid的单元内部工作。让我困扰的是，如果我将其放置在html文件中，它会完美地工作。在app.component.html中：

<select class="form-control"  (change)="
RefreshRisqueBrutColumn();"
>
    <br>
    <option>1- Très improbable</option>
    <option>2- Peu probable</option>
    <option>3- Possible</option>
    <option>4- Probable</option>
</select>

在app.component.ts中，我有侦听器定义：

  public RefreshRisqueBrutColumn() {
    const params = { force: true };
    this.gridApi.refreshCells(params);
    console.log('LISTENER WORKS')
  }

因此，在浏览器中，当我选择一个选项时：
我在控制台中有这个：
现在，我采用了完全相同的选择代码，并将其编写在自定义单元格渲染器中：

{
          headerName: "Probabilité",
          headerToolName: "Consultez les échelles",
          field: "pbt",
          editable: true,
          cellRenderer: params => {
            return `
            <hr>
            <select class="form-control"  (change)="
            RefreshRisqueBrutColumn();"
            >
                <br>
                <option>1- Très improbable</option>
                <option>2- Peu probable</option>
                <option>3- Possible</option>
                <option>4- Probable</option>
  </select>
  <hr>
            `;
          }
        }

这是浏览器中的列：

所以当我选择一个选项时，应该会发生同样的事情，对吧？
但是，控制台中没有任何显示。
所以我很好奇为什么不起作用？
如果可能的话，我该如何解决？

Answer 1

cellRenderer期望为HTML呈现纯字符串。您在ColDef中提供的字符串实际上是Angular模板-应该将其编译为纯HTML。（请注意(change)="RefreshRisqueBrutColumn()）

创建自定义CellRendererComponent，提供模板，在其中定义更改处理程序，然后一切正常。

参考：Angular Cell Render Components

Answer 2

我已经解决了这个问题，谢谢@Paritosh的提示。
为了节省您的时间，我的操作方法如下：
这是自定义单元格渲染器的定义：

drop-down-cell-renderer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drop-down-cell-renderer',
  templateUrl: './drop-down-cell-renderer.component.html',
  styleUrls: ['./drop-down-cell-renderer.component.css']
})
export class DropDownCellRendererComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
 params: any;

  agInit(params: any): void {
    this.params = params;
  }

  public RefreshRisqueBrutColumn() {
    console.log('LISTENER WORKS')
  }
}

drop-down-cell-renderer.component.html

<select class="form-control"  (change)=" RefreshRisqueBrutColumn();">
    <br>
    <option>1- Très improbable</option>
    <option>2- Peu probable</option>
    <option>3- Possible</option>
    <option>4- Probable</option>
</select>

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {AgGridModule} from 'ag-grid-angular';
import { DropDownCellRendererComponent } from './drop-down-cell-renderer/drop-down-cell-renderer.component';

@NgModule({
  declarations: [
    AppComponent,
    DropDownCellRendererComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([DropDownCellRendererComponent])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import {Component, OnInit} from '@angular/core';
import {NumberFormatterComponent} from './number-formatter.component';
import {NumericEditorComponent} from './numeric-editor.component';
import {RangeFilterComponent} from './range-filter.component';
import { DropDownCellRendererComponent } from './drop-down-cell-renderer/drop-down-cell-renderer.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  columnDefs = [
    {
          headerName: "Probabilité",
          headerToolName: "Consultez les échelles",
          field: "pbt",
          editable: true,
          cellRenderer: 'dropDownCellRendererComponent'
        }
  ];

  rowData = [{}];

  frameworkComponents = {

    dropDownCellRendererComponent: DropDownCellRendererComponent
  };

  ngOnInit() {

  }
}

结果如下：
希望这对某人有帮助：）

事件侦听器在网格外部工作，但在ag-grid的单元格内部不工作

2 个答案: