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

Я установил простое определение столбца:

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

Что отрисовывается следующим образом:
введите описание изображения здесь
Как вы могли заметить, я настроил прослушиватель в пользовательском рендере ячейки, который регистрирует вариант, выбранный среди машинописного текста. список.

Обновить

Вот определение слушателя:

 public UpdateRisqueBrut(risque) {
    console.log(risque.value);
  }

Я не получаю ошибок, но после выбора этой опции в консоли ничего не отображается.
Я что-то делаю не так?


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

Ответы (1)


arrow_upward
0
arrow_downward

Также может быть достигнуто с помощью AgGrid 'agSelectCellEditor / agPopupSelectCellEditor'

headerName: 'Probabilité',
field: 'make',
editable: true,
cellEditor:'agSelectCellEditor',
cellEditorParams: {
    values: ['1- Très improbable','2- Peu probable','3- Possible','4- Probable']
}

Параметр On Grid прослушивать измененное значение ячейки

onCellValueChanged: function(event) {
        console.log('onCellValueChanged: Probabilité' + ' = ' + event.newValue);
    },

Мне также удалось получить ваш код с изменением ниже

{headerName: "Probabilité",
     editable: true, 
     cellRenderer: params => {
              return `
              <hr>
              <select onchange="myFunction(this)">
                  <option value='1- Très improbable'>1- Très improbable</option>
                  <option value='2- Peu probable'>2- Peu probable</option>
                  <option value='3- Possible'>3- Possible</option>
                  <option value='4- Probable'>4- Probable</option>
              </select>
              <hr>`;
            }
      }

function myFunction(t)
{
  console.log(t.value);
}

Ссылка на рабочую демонстрацию находится здесь.

Надеюсь это поможет.

person Idris    schedule 02.05.2019
comment
Во-первых, поскольку я работаю с angular, мне нужно обернуть onchange с помощью (), чтобы слушатель стал таким: (onchange) = myFunction (this). В другом месте Angular выдает эту ошибку: Uncaught ReferenceError: myFunction не определен. (Я нахожу это немного странным, если кто-то хочет объяснить, что добро пожаловать) - person Ahmed Ghrib; 02.05.2019
comment
Во-вторых, даже после того, как я поставил скобку и не получил ошибок, я вернулся к исходной точке. То есть, как я сказал в своем посте, у меня нет ошибок, но на консоли ничего не отображается :(. (Я действительно не понимаю, почему это не работает, даже если оно работает на Plunker!). Спасибо за вашу помощь , в любом случае! - person Ahmed Ghrib; 02.05.2019
comment
И не могли бы вы объяснить, почему вы использовали это вместо $ event.target в слушателе - person Ahmed Ghrib; 02.05.2019
comment
Даже если я попробую console.log ('RandomString'), это не сработает. Похоже, слушатель onchange даже не загорелся, так сказать - person Ahmed Ghrib; 02.05.2019
comment
И если я помещу тот же код в файл html, он работает! Я думаю, это как-то связано с ag-grid. Я думаю, что отправлю еще один вопрос в SO, чтобы подробнее объяснить это. - person Ahmed Ghrib; 02.05.2019
comment
Вот ссылка: stackoverflow.com/questions/55950516/ - person Ahmed Ghrib; 02.05.2019
comment
Извините за весь этот хаос - person Ahmed Ghrib; 02.05.2019