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

Question

我在*ngFor循环内的div创建了一个称为data-menuitemtype的属性。 创建这样的属性之前，我从来没有遇到过问题，因为它是完全有效的HTML5语法，但是由于某种原因， *ngFor循环似乎并不喜欢它，并给我以下错误：

“无法绑定到'menuitemtype'，因为它不是'div'的已知属性”。

如果我将其更改为id则它“有效”，但是然后我将获得一堆具有相同值的id，这显然不理想。 如何在*ngFor循环中使用创建的属性而不会导致错误？ 这可能吗？

这是我的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

据我[attr.insertYourAttributeHere] ， data-menuitemtype不是属性，而是属性，因此您应该在代码中使用[attr.insertYourAttributeHere] ，如下所示：

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

或者，如果您喜欢插值：

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

有关属性和属性之间差异的更多信息，请检查Angular 2模板语法 。