Angular 2 *ngFor error: Can't bind to 'menuitemtype' since it isn't a known property of 'div'

Question

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

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

如果我将它更改为 id，它会 "works"，但是我会得到一堆具有相同值的 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

据我所知，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 Template Syntax。

Angular 2 *ngFor error: Can't bind to 'menuitemtype' since it isn't a known property of 'div'

Angular 2 *ngFor error: Can't bind to 'menuitemtype' since it isn't a known property of 'div'

angular

angular2-template

ngfor