Не отображать данные фильтра для глобальной переменной с подсветкой. FilterData означает вне функции в Typescript

Question

Я использую Angular DataTable Все это работает нормально, но когда я console мой variable под функцией, он отображает, но когда я console вне функции, то он не отображает console нет ничего на variable variable пусто.

  @ViewChild(DataTableDirective)
  private datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};

  var getFilterData=""

  this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance
        .on( 'draw', function () {  
          getFilterData=dtInstance.search()
            console.log(getFilterData) //getting filter value
      } );
    })

Не получается значение фильтра

console.log(getFilterData) // not getting filter value

Мои ожидания

Как сохранить значение фильтра в глобальной переменной означает вне функции, и я получаю значение в функции, но не вне функции, и я хочу для выделения фильтра я хочу значение, если я получу, то я могу легко выделить данные фильтра.

Answer 1

Вы можете использовать непосредственно, вы застряли при передаче value из javascript в машинопись , затем просто используйте машинопись то есть лямбда функция или стрелка функция ()=>{ }

после этого вы можете передать данные за пределы переменной, вы получите данные в этой переменной getFilterData

rerender() {
  this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.on('draw', ()=>{  
      var filterData=[]
      for (let index = 0; index <  dtInstance.rows({ filter : 'applied'}).data().length; index++) {
        filterData.push(dtInstance.rows({ filter : 'applied'}).data()[index] ) 
      }
      console.log("filterData dad ",filterData)   
    }) 
  })
}

вместо

this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance
        .on( 'draw', function () {  
          getFilterData=dtInstance.search()
            console.log(getFilterData) //getting filter value
      } );
})

Answer 2

Проблема в том, что вы используете javascript function и Машинопись function и ниже javascript function значение получается но я думаю, что вы не получите значение в Typescript , потому что это отличается, значение не передается из javascript в Typescript .

Если вы хотите выделить фильтр данных, то просто вы можете выбрать 2 варианта, которые вам удобнее, по вашему выбору здесь 2 варианта.

1. использование npm зависимость npm install julmot/mark.js --save-dev и npm install julmot/datatables.mark.js --save-dev
2. использование CDN https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js) и https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js

Вот ссылка Ссылка 1 и Ссылку 2

и просто используйте для выделения примера данных фильтра

this.dtOptions={
 mark=true
}

и для пользовательских

this.dtOptions={
 mark:{
   className: 'highlight'
 }
}

Подробнее о отметке js и выделении документации Здесь