角2模板- attr html5数据解析错误

Question

我正在开发的Angular 2应用程序是为呼叫中心开发的。

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

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

为了创建这些模态和触发器，我放置了以下代码:

<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>

这似乎应该工作,但是我得到了foll

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

我检查这个问题,但没有帮助我。

有什么方法可以使用<代码> * ngFor和c > < /代码吗

Answer 1

Angular清楚地区分了HTML元素属性和特性，因为它们确实是。

如果您阅读了《模板绑定开发人员指南》，其中有一节专门讨论这一差异。

属性由 HTML 定义。属性由 DOM（文档对象模型）定义。

我们使用的标准绑定操作符[]进行DOM级属性绑定。要进行属性绑定，我们需要在[]中添加前缀attr。

查看HTML属性与DOM属性部分，了解属性绑定和属性绑定的区别。

Answer 2

这是因为 data- 不是 div 的 prop（属性）

<代码> (foo) = "实验" > < /代码的意思是“传播的价值

如果你想影响你所需要属性值

这会让它为你工作:

    [attr.data-toggle]=""