Слушатель событий работает за пределами сетки, но не работает внутри ячейки в ag-grid - PullRequest
Новая
       149

Слушатель событий работает за пределами сетки, но не работает внутри ячейки в ag-grid

0 голосов
/ 02 мая 2019

Я пытался заставить простого слушателя работать внутри ячейки в 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')
  }

Так в браузере, когда я выбираю опцию:
enter image description here У меня есть это в консоли:
Теперь я взял точно такой же код выбора и написал его в пользовательском модуле визуализации ячеек: 

{
          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>
            `;
          }
        }

Итак, вот колонка в браузере:
enter image description here
Поэтому, когда я выбираю опцию, должно происходить то же самое, верно?
Однако в консоли ничего не отображается.
Так что мне действительно любопытно, почему это не работает?
И если можно, как я могу это исправить?

Ответы [ 2 ]

1 голос
/ 02 мая 2019

cellRenderer ожидает, что простая строка будет отображена для HTML. Строка, которую вы предоставляете в своем ColDef, на самом деле является шаблоном Angular, который должен быть скомпилирован в простой HTML. (соблюдать (change)="RefreshRisqueBrutColumn())

Создайте пользовательский CellRendererComponent, предоставьте шаблон, определите обработчик изменений внутри него, и все будет работать нормально.

Ссылка: Компоненты визуализации угловых ячеек

0 голосов
/ 02 мая 2019

Я исправил это благодаря подсказке Паритоша.
Чтобы сэкономить время, вот как я это сделал:
Это определение пользовательского средства визуализации ячеек:

раскрывающийся список-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')
  }
}

раскрывающийся список-ячейка-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>

приложение.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() {

  }
}

И вот результат:
enter image description here Надеюсь, это кому-нибудь поможет:)

...