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

Я боролся с тем, чтобы простой слушатель работал внутри ячейки в 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>
            `;
          }
        }

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


ag-grid ag-grid-angular ag-grid-ng2
person Ahmed Ghrib    schedule 02.05.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

Ссылка: Angular Cell Render Components < / а>

person Paritosh    schedule 02.05.2019
comment
Хорошо, я попробую и опубликую ответ, если он сработает. А пока не могли бы вы объяснить, почему это не работает? Это все еще немного расплывчато: cellRenderer ожидает, что для HTML будет отображена простая строка. Строка, которую вы предоставляете в своем ColDef, на самом деле является шаблоном Angular, который должен быть скомпилирован в простой HTML. (наблюдать (изменение) = RefreshRisqueBrutColumn ()) - person Ahmed Ghrib; 02.05.2019

arrow_upward
0
arrow_downward

Я исправил это спасибо совету @ 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() {

  }
}

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

person Ahmed Ghrib    schedule 02.05.2019