Как удалить и добавить css стилей, используя javascript - добавленный стиль, не отраженный в пользовательском интерфейсе

Question

Я создал стек для своего кода. https://stackblitz.com/edit/ngxdatatable-sort-test-qfeux3?file=src / app / app.component.ts

В основном я пытаюсь добавить собственный значок, если сортировка не выполняется по столбцам. Если выполняется какая-либо сортировка, я сохраняю существующий значок.

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

Answer 1

Я проверил ваш код и после следующих изменений вижу изменение значка. Попробуйте проверить, не в этом ли проблема.

onSort(event){
    const name: string = event.column.name;
    name = name.toLowerCase();
    console.log(event);
    if(name=="company") {
      event.sorts.push({"id":0});
    }
     if(name =="name") {
      event.sorts.push({"id":1});
    }

     if(name=="age") {
      event.sorts.push({"id":3});
    }
     for (let i = 0; i < this.columns.length; i++) { 
       console.log("id value",event.sorts[1].id);
        console.log("i value",i);
       if(event.sorts[1].id == i){
         console.log("inside id value",event.sorts[1].id);
         console.log("inside i value",i);
         console.log("do nothing");
       } else {
         console.log('change icon');
         // here i am removing the existing icon and adding the custom icon
             document.getElementsByClassName("sort-btn")[i].classList.remove(
           "datatable-icon-down");
           document.getElementsByClassName("sort-btn")[i].classList.remove("sort-desc");
            document.getElementsByClassName("sort-btn")[i].classList.remove(
           "datatable-icon-up");
           document.getElementsByClassName("sort-btn")[i].classList.remove("sort-asc");
  // running in debug mode, during execution i can see custom icon getting added, but after execution i am not able to see the added icon, 
    if (i == 2) {
      document.getElementsByClassName("sort-btn")[i].classList.remove("datatable-iconCustom");
       } else {
           setTimeout(()=>{

           document.getElementsByClassName("sort-btn")[i].classList.add("datatable-iconCustom");             
         },10);  

       }
       }
        }  
  }