html5数据的角2模板分析误差-属性

Question

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

我已经创建了一个角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>

这看起来应该有效，但是当我转到页面时，我的浏览器控制台中会出现以下错误：

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周围使用和不使用data-target，但这两种方法似乎都不管用。我也在div上尝试过，它包装了复选框和标签，在这两个地方我都得到了相同的错误。

是否有任何方法可以在*ngFor元素上使用自定义属性或非本地属性？

Answer 1

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

[foo]="exp"的意思是“将exp计算值传播到foo属性”。 如果要影响属性值，需要使用[attr.foo].

这会让它对你有用：

    [attr.data-toggle]=""

Answer 2

角明确区分了HTML元素的属性和属性，因为它们确实是。

如果您阅读模板绑定的开发人员指南，它有一个专门讨论这种差异的部分。

属性由HTML定义。属性由DOM ()定义。

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

查看HTML attribute vs. DOM property一节，了解attribtue和属性绑定有何不同。