【问题标题】：Angular 4 does not let me use data attributesAngular 4 不允许我使用数据属性
【发布时间】：2017-04-24 21:25:34
【问题描述】：

我正在尝试使用 jQuery Nestable 库，我必须为我的列表元素设置 data-id 和 data-weight。这是所需的列表架构：

<div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item" data-id="10" data-weight="1">
                <div class="dd-handle">Item 1</div>
            </li>
            <li class="dd-item" data-id="29" data-weight="2">
                <div class="dd-handle">Item 2</div>
            </li>
            <li class="dd-item" data-id="58" data-weight="3">
                <div class="dd-handle">Item 11</div>
            </li>
        </ol>
    </div>

但是，每次我尝试为元素分配属性时，都会出现以下错误：

Can't bind to 'weight' since it isn't a known property of 'li'.

这是我的 nestable.directive.ts：

@Directive({ selector: '[uiNestable]' })
export class NestableDirective {
    constructor(el: ElementRef) {
        $(el.nativeElement).nestable({
            group: 1
        });
    }
}

感谢任何帮助。

【问题讨论】：

为什么要将“数据-”附加到您的属性中？我知道 Visual Studio 在无法识别 html 语法时会抛出警告，但您可以忽略这些。还有其他原因吗？
要让 jQuery Nestable 库正常工作，我必须将 data-* 属性分配给 HTML 元素。

标签： angular jquery-plugins jquery-nestable

【解决方案1】：

尝试使用attr 绑定语法绑定到data-weight 属性。可以这样做：

<li class="dd-item" data-id="10" [attr.data-weight]="1">
    <div class="dd-handle">Item 1</div>
</li>

Demo

【讨论】：