Angular 默认情况下显示排序图标-ngx数据表列

我正在使用

    <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");
  }

{{value}}
恩戈尼尼特（）{
this.init（）；
}
init（）{
this.fetchDetails（）；
}
获取详细信息（）{
document.getElementsByClassName（“排序btn”）[0].classList.add（“datatable iconCustom”）；
}

---

这里，当我们点击标题时，排序图标被启用。是否有一种方法可以在默认情况下始终启用排序图标，而不仅仅是在标题悬停时。

ngx datatable动态创建图标。它的第一部分是

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

另一种方法是触发单击

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

如果你想显示这两个图标，那么你需要自定义类

在

style.css中

put

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

并添加自定义类，而不是两个以上的类

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

---

您可以添加默认的未设置图标，如下所示：

.ngx-datatable { // datatable Style
  .datatable-header { // header Style
    .datatable-header-cell { // header Cell Style
      .sort-btn.datatable-icon-sort-unset::before { // Icon Style
        content: '\e968'; // You favorite Icon
        font-family: 'fontFamily'; // Your Font Family
        font-style: normal; // Font Style
     }
    }
  }
 }

---

你可以在你填写完数据后再做。如何在数据填充后第一次加载时，在触发单击之前显示两个排序图标（asc和desc图标）。由于自定义类解决方案不适用于我，请将其添加到stackblitz中，因为它未更新。我需要在初始加载所有标题的数据时显示这两个图标。不仅仅是第一列标题。并在单击标题后仅显示一个图标。

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

.ngx-datatable { // datatable Style
  .datatable-header { // header Style
    .datatable-header-cell { // header Cell Style
      .sort-btn.datatable-icon-sort-unset::before { // Icon Style
        content: '\e968'; // You favorite Icon
        font-family: 'fontFamily'; // Your Font Family
        font-style: normal; // Font Style
     }
    }
  }
 }