html5数据属性上的Angular 2模板解析错误 [英] Angular 2 Template Parse Error on html5 data- attributes

问题描述

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

The Angular 2 app I'm working on is for a call center.

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

I have created an Angular 2 component that is a bootstrap modal. It works perfectly when I instantiate one or several on a page, and create the triggers to open them. There are no issues there. I have tested that part thoroughly.

现在在我的应用程序中，我们有一个复选框列表，单击这些复选框后，应该会弹出一个模式，并具有指示呼叫中心代理在选择呼叫原因时要覆盖的说明.

Now in my app, we have a list of checkboxes which when clicked, a modal is supposed to pop up and have instructions for the call center agent to cover when they have chosen a reason for the call.

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

To create these modals and the triggers, this is the code that I have placed:

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

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

This seems like it should work, but I get the following error in my browser console when I go to the page:

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上进行了尝试，并且在两个地方都遇到了相同的错误.

I checked this question but it didn't help me any. I tried with and without the [] around data-toggle and data-target and neither way seems to work. I've also tried it on the div that wraps the checkbox as well as the label and I get the same error in both spots.

是否可以将*ngFor与HTML元素上的自定义属性或非本地属性一起使用?

Is there any way to use *ngFor with custom attributes or non-native attributes on HTML elements?

推荐答案

这是因为data-不是div

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

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

If you want to influence attribute value you need to use [attr.foo].

这将使它为您工作:

    [attr.data-toggle]=""

这篇关于html5数据属性上的Angular 2模板解析错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！