html5数据-属性上的Angular 2模板解析错误

我正在开发的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>

{{case.title}

这似乎应该可以工作，但当我转到页面时，我的浏览器控制台中出现以下错误：

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

异常：错误：未捕获（承诺中）：模板分析错误：
无法绑定到“数据切换”，因为它不是已知的本机属性（“ss=”col-md-6“>
案例类型
][数据切换]=“模态”[数据目标]=“模态-i”>
这是因为
data-
不是
div的属性

[foo]=“exp”
表示“将exp计算值传播到foo属性”

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

这将使它为您工作：

    [attr.data-toggle]=""

Angular明确区分HTML元素的属性和属性，因为它们实际上是

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

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

我们使用的标准绑定运算符执行DOM级别的属性绑定。要执行属性绑定，我们需要在
[]
中使用前缀
attr

查看“HTML属性与DOM属性”一节，了解属性绑定和属性绑定的区别。
有趣的是，您遇到了一个错误，这意味着angular实际上尝试绑定到数据切换，但它不应该这样做。您使用的是angular的哪个版本？您的示例代码正确吗？是否确实需要这样做ssary？为什么数据属性是唯一的，angular试图绑定它们？没有attr。它认为这是一个道具，相信这就是它出错的原因，所以你不能用angular加载编写纯html？这看起来很尴尬。你可以，我看不出他在做什么，只是知道不管他放什么，angular都认为这是div的实际属性tag.attr和prop之间的差异很大。明天要做一把小提琴这可能值得在github上发表一个关于它的问题，这很奇怪。这是因为它也在一个*ngFor中。但仍然很奇怪。@mariochalso这是因为他在ngFor中做[]括号。我明天会看更多