Angular中如何将元素ngClass条件绑定到父div的data-order属性

错误根因 #

data-order是HTML的自定义数据属性，不属于div元素的标准内置DOM属性，所以不能直接通过模板变量eventOrderHead.data-order的方式访问，横杠命名的data属性会被自动转换为DOM元素dataset对象下的驼峰命名属性。

可行实现方案 #

方案1：通过dataset属性直接读取（无需修改组件ts代码） #

直接通过模板引用变量的dataset对象访问order属性，判断条件修改为eventOrderHead.dataset.order === 'asc'即可，修改后的完整代码如下：

<div #eventOrderHead class="table__cell left clickable nowrap" [appSort]="events" data-order="desc" style="width: 1%;" data-name="order">
    <span [ngClass]="eventOrderHead.dataset.order === 'asc' ? 'whis-sorting sorting-top' : 'whis-sorting sorting-bottom'">
        №
        <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="bottom" fill-rule="evenodd" clip-rule="evenodd" d="M0 6L4 10L8 6" fill="#9F9F9F" />
            <path class="top" fill-rule="evenodd" clip-rule="evenodd" d="M8 4L4 -4.29138e-07L0 4" fill="#9F9F9F" />
        </svg>
    </span>
</div>

方案2：使用组件变量绑定（更符合Angular最佳实践） #

如果排序状态本身就是组件内部控制的，建议直接在组件类中定义排序状态变量，避免直接操作DOM属性：

1. 在组件ts中定义变量：

public sortOrder: 'asc' | 'desc' = 'desc';

2. 修改HTML模板，同时绑定data-order属性和ngClass判断：

<div class="table__cell left clickable nowrap" [appSort]="events" [attr.data-order]="sortOrder" style="width: 1%;" data-name="order">
    <span [ngClass]="sortOrder === 'asc' ? 'whis-sorting sorting-top' : 'whis-sorting sorting-bottom'">
        №
        <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="bottom" fill-rule="evenodd" clip-rule="evenodd" d="M0 6L4 10L8 6" fill="#9F9F9F" />
            <path class="top" fill-rule="evenodd" clip-rule="evenodd" d="M8 4L4 -4.29138e-07L0 4" fill="#9F9F9F" />
        </svg>
    </span>
</div>

后续切换排序状态时直接修改sortOrder变量的值即可，会同步更新data-order属性和样式类。

内容的提问来源于stack exchange，提问作者Ярослав Оверченко