각도 2 * ngFor 오류 : 'div'의 알려진 속성이 아니기 때문에 'menuitemtype'에 바인딩 할 수 없습니다.

Question

*ngFor 루프 내에서 div에 사용중인 data-menuitemtype이라는 속성을 만들었습니다. 나는 그것이 완벽하게 유효한 HTML5 구문 때문에이 같은 속성을 만드는 전에 문제를 본 적이 있지만, 어떤 이유로 *ngFor 루프는 그것을 좋아하는 것 나에게 다음과 같은 오류주지 않는다 :

"Can't bind to 'menuitemtype' since it isn't a known property of '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

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

자세한 내용은 differe 속성과 속성 사이에 차이가 있으면 Angular 2 Template Syntax을 확인하십시오.