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

我检查了this question，但它对我没有任何帮助。我在[]和data-toggle附近使用data-target进行了尝试，但似乎都没有。我也尝试了包装复选框和标签的div，我在两个点都得到了相同的错误。

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

Answer 1

这是因为data-不是div

的道具（属性）

[foo]="exp"表示＆＃34;将exp评估的值传播到foo属性＆＃34; 。

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

这将使它适合您：

    [attr.data-toggle]=""

Answer 2

Angular明确区分了HTML元素的属性和属性，因为它们确实存在。

如果您浏览template binding的开发人员指南，则会有专门针对此差异的部分。

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

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

查看HTML attribute vs. DOM property部分，了解attribtue和属性绑定的不同之处。

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

2 个答案: