Angular 2 * ngFor error: Kann nicht an 'menuitemtype' binden, da es keine bekannte Eigenschaft von 'div' ist

Question

Ich habe ein Attribut namens data-menuitemtype erstellt, das ich in einem div innerhalb einer *ngFor Schleife verwende. Ich hatte noch nie Probleme, bevor mit Attributen wie diese zu schaffen, weil es absolut gültige HTML5 Syntax ist, aber aus irgendeinem Grunde *ngFor Schleifen scheinen nicht, es zu mögen und geben Sie mir die folgende Fehlermeldung:

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

Wenn ich ändern es zu id es "funktioniert", aber dann werde ich eine Reihe von IDs mit dem gleichen Wert haben, der offensichtlich nicht ideal ist. Wie kann ich erstellte Attribute innerhalb einer *ngFor Schleife verwenden, ohne Fehler zu verursachen? Ist das möglich?

Hier ist mein 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

Von dem, was ich sehen kann, data-menuitemtype ist keine Eigenschaft, sondern ein Attribut und deshalb sollten Sie [attr.insertYourAttributeHere] in Ihrem Code wie folgt verwenden:

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

Oder wenn Sie bevorzugen 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> 

weitere Informationen über differe nce zwischen Attributen und Eigenschaften überprüfen Sie Angular 2 Template Syntax.