Показывать значок сортировки по умолчанию - ngx-datatable-column

Question

Я использую

    <ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Name" prop="empName" [cellClass]="'text-left'" [headerClass]="'text-left'" [width]="450">
                                        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                            <span class="empName">{{value}}</span>
                                        </ng-template>
                                    </ngx-datatable-column>


 ngOnInit() {
    this.init();
  }

  init() {
    this.fetchDetails();
  }

  fetchDetails() {
    document.getElementsByClassName("sort-btn")[0].classList.add("datatable-iconCustom");
  }

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

Answer 1

ngx-datatable создает значок динамически. Его начальная часть -

<span class="sort-btn"></span>

после того, как вы нажали кнопку «Вернуться к

<span class="sort-btn sort-asc datatable-icon-up"></span>

, поэтому вы не можете показать или скрыть при изменении css. Вам нужно добавить эти два класса динамически, или вам нужно запустить триггер для щелчка.

Код ниже добавляет классы в первый заголовок в виде значка вниз. sort-asc и datatable-icon-up предназначены для сортировки c, вы должны использовать другой класс, если сортировка по умолчанию - по убыванию

document.getElementsByClassName("sort-btn")[0].classList.add("sort-asc");
document.getElementsByClassName("sort-btn")[0].classList.add("datatable-icon-up");

другой способ - нажать

document.getElementsByClassName("sort-btn")[0].click();

if вы хотите показать оба значка, тогда вам нужен собственный класс

в style.css, поместите

.datatable-iconCustom:before {
    content: "\66 \65";
}

и добавьте собственный класс, а не два класса

document.getElementsByClassName("sort-btn")[0].classList.add("datatable-iconCustom");