Блог

Главная - Вопросы по программированию - Как добавить атрибут с учетом условного регистра в Angular 2?

Как добавить атрибут с учетом условного регистра в Angular 2?

#angular #dynamic-attributes

#angular #dynamic-attributes

Вопрос:

Я хочу динамически добавлять атрибут ‘tourAnchor’, для которого я добавляю строку ниже.

 <div [attr.tourAnchor]=" feedbackIndex == 0 ? 'like' : null">

Но атрибут заменяется на нечувствительный к регистру, и после проверки условий он преобразуется как

 <div touranchor="like">

Не могли бы вы, пожалуйста, помочь мне сохранить ‘tourAnchor’ в качестве регистра верблюда?

Комментарии:

1. Согласно: angular.io/guide/property-binding#colspan «Интерполяция и привязка свойств могут устанавливать только свойства, а не атрибуты». Итак, это невозможно? Мне пришлось немного реорганизовать компоненты. Может быть полезной функцией.

Ответ №1:

Html не учитывает регистр, а теги и атрибуты считаются строчными, проверьте это, когда я сталкиваюсь с этой проблемой, я использую атрибут data для сохранения ключа и другой для ключа

Может быть, это сработает для вас

шаблон 

 <p [attr.data-key]="'tourAnchor'" [attr.data-value]="'like'"  >
  tourAnchor - like
</p>

<p [attr.data-key]="'tourAnchor'" [attr.data-value]="'dislike'"  >
  tourAnchor - like
</p>

Стиль

 p[data-key="tourAnchor"][data-value="like"] {
  color:blue
}


p[data-key="tourAnchor"][data-value="dislike"] {
  color:red
}

демонстрация stackblitz 🚀🚀