角度2 * ngForエラー： 'menuitemtype'にバインドできません。 'div'の既知のプロパティではありません。

Question

ループ内のdivで使用しているdata-menuitemtypeという属性を作成しました。それは完全に有効なHTML5の構文ですので、私はこのような属性を作成して前に問題を持っていたことがありませんが、いくつかの理由で*ngForループはそれを好きで、私は次のエラーを与えていないように見えます：

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

私が変更した場合それはidに "うまくいきます"が、それから私は明らかに理想的ではない同じ値のIDを持つことになります。エラーを起こさずに*ngForループ内に作成された属性を使用するにはどうすればよいですか？これは可能ですか？ data-menuitemtypeはプロパティではありません、私が見ることができるものから

<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]を使用する必要があります：ここで

は私のhtmlです

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

differeについての詳細はこちら属性とプロパティの間には、Angular 2 Template Syntaxをチェックしてください。