html5数据属性上的Angular 2 Template Parse Error

Question

我正在开发的Angular 2应用程序用于呼叫中心.

我创建了一个Angular 2组件,它是一个bootstrap模式.当我在页面上实例化一个或多个时,它可以很好地工作,并创建触发器来打开它们.那里没有问题.我已经彻底测试了那部分.

现在在我的应用程序中,我们有一个复选框列表,当点击时,会弹出一个模态,并指示呼叫中心代理在选择呼叫原因时进行覆盖.

要创建这些模态和触发器,这是我放置的代码:

<div class="checkbox" *ngFor="#case of caseTypes; #i = index" data-toggle="modal" data-target="modal-i">
    <label>
        <input type="checkbox" [(ngModel)]="case.selected"> {{case.title}}
    </label>
    <instructions-modal [instruction]="case.instructions" title="{{case.title}}" closeButtonTitle="Finished" modalId="modal-{{i}}"></instructions-modal>
</div>

这似乎应该可以工作,但是当我转到页面时,我在浏览器控制台中收到以下错误:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'data-toggle' since it isn't a known native property ("ss="col-md-6">
        <h4>Case Type</h4>
        <div class="checkbox" *ngFor="#case of caseTypes; #i = index" [ERROR ->][data-toggle]="modal" [data-target]="modal-i">
            <label>
                <input type="checkbox" [(ngModel)]="cas"): CaseCreation@8:64
Can't bind to 'data-target' since it isn't a known native property ("ase Type</h4>
        <div class="checkbox" *ngFor="#case of caseTypes; #i = index" [data-toggle]="modal" [ERROR ->][data-target]="modal-i">
            <label>
                <input type="checkbox" [(ngModel)]="case.selected"> {{case.ti"): CaseCreation@8:86

我检查了这个问题,但它没有帮助我.我尝试了没有[]周围的东西data-toggle,data-target似乎没有办法.我也尝试了包装复选框和标签的div,我在两个点​​都得到了相同的错误.

有没有办法*ngFor在HTML元素上使用自定义属性或非本机属性？

Answer 1

这是因为data-不是支柱(属性)div

[foo]="exp"表示"将exp评估的值传播到foo属性".

如果要影响属性值,则需要使用[attr.foo].

这将使它适合您:

    [attr.data-toggle]=""