Angular 2 * ngFor错误：无法绑定到“ menuitemtype”，因为它不是“ div”的已知属性

Question

I created an attribute called data-menuitemtype that I'm using in a div inside of an *ngFor loop. I've never had issues before with creating attributes like this because it is perfectly valid HTML5 syntax, but for some reason *ngFor loops don't seem to like it and give me the following error:

"Can't bind to 'menuitemtype' since it isn't a known property of 'div'".

If I change it to id it "works", but then I will have a bunch of id's with the same value which obviously isn't ideal. How can I use created attributes within an *ngFor loop without causing errors? Is this possible?

Here is my html:

<div *ngFor="let variety of varieties">
    <div class="varietyTypeName menu-item-type-header" data-menuitemtype="{{variety.VarietyTypeName}}">
        {{variety.VarietyTypeName}}
        <i class="fa fa-angle-down arrow-toggle"></i>
    </div>    
</div>

Answer 1

From what I can see, data-menuitemtype is not a property, but an attribute and therefore you should use [attr.insertYourAttributeHere] in your code, like this:

<div *ngFor="let variety of varieties">
    <div class="varietyTypeName menu-item-type-header" [attr.data-menuitemtype]="variety.VarietyTypeName">
        {{variety.VarietyTypeName}}
        <i class="fa fa-angle-down arrow-toggle"></i>
    </div>    
</div>

Or if you prefer interpolation:

<div *ngFor="let variety of varieties">
    <div class="varietyTypeName menu-item-type-header" attr.data-menuitemtype="{{variety.VarietyTypeName}}">
        {{variety.VarietyTypeName}}
        <i class="fa fa-angle-down arrow-toggle"></i>
    </div>    
</div>

For more information about difference between attributes and properties, check Angular 2 Template Syntax .