Angular 4不允许我使用数据属性

时间:2017-04-24 13:07:53

标签: angular jquery-plugins jquery-nestable

我正在尝试使用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
        });
    }
}

感谢任何帮助。

1 个答案:

答案 0 :(得分:8)

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

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

Demo