Angular：将类添加到跨度选择器

Question

我有以下代码，我想向跨度选择器添加一个类，但出现此错误

无法读取 null 的属性“classList”

<th *ngFor="let column of columns;"
    <ng-container *ngIf="column?.sortable">
        <span [id]="'sort-'+column?.field" (click)="sortArray(column?.field)"></span>
    </ng-container>
</th>

if (this.columns) {
   this.columns.forEach(column => {
       if (column.sortable) {
           const parent: HTMLElement = document.getElementById("sort-" + column.field);

           this.renderer.setElementClass(parent, "sorting_asc", true);
       }
   })
}

Answer 1

我认为您的代码过于复杂，您使用的是 angular，我认为使用document.getElementById()访问 DOM 元素不是一个好习惯。

为了让您的代码正常工作，您需要确保视图已加载，然后才能访问 DOM 元素。 您需要将代码移动到AfterViewInit生命周期挂钩。

下面是我将如何重构代码

<th *ngFor="let column of columns;"
    <ng-container *ngIf="column?.sortable">
        <span [class.sorting_asc]="column?.sortable" (click)="sortArray(column?.field)"></span>
     </ng-container>
</th>

我们简单地绑定到[class.sorting_asc]="column?.sortable"并让 angular 为我们应用这些类