Блог

Я создал атрибут с именем data-menuitemtype , который я использую div внутри *ngFor цикла. Раньше у меня никогда не было проблем с созданием подобных атрибутов, потому что это совершенно корректный синтаксис HTML5, но по какой-то причине *ngFor циклам это не нравится, и они выдают мне следующую ошибку:

«Не удается выполнить привязку к «menuitemtype», поскольку это неизвестное свойство «div»».

Если я изменю его на 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>
  

Из того, что я вижу, 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.