Как добавить условный атрибут в Angular 2?

Как я могу условно добавить атрибут элемента, например checked, флажок?

Предыдущие версии Angular были, NgAttrи я думаю, NgCheckedчто все они обеспечивают функциональность, которая мне нужна. Однако эти атрибуты, по-видимому, не существуют в Angular 2, и я не вижу другого способа обеспечить эту функциональность.

null удаляет это:

[attr.checked]="value ? '' : null"

или

[attr.checked]="value ? 'checked' : null"

Подсказка:

Атрибут против свойства

Когда элемент HTML, в который вы добавляете эту привязку, не имеет свойства с именем, используемым в привязке ( checkedв данном случае), а также не применяет угловой компонент или директиву к тому же элементу, который имеет @Input() checked;, тогда [xxx]="..."не может использоваться.

Смотрите также В чем разница между свойствами и атрибутами в HTML?

С чем связываться, когда такого свойства нет

Альтернативы [style.xxx]="...", [attr.xxx]="...", в [class.xxx]="..."зависимости от того, что вы пытаетесь достичь.

Потому что <input>имеет только checkedатрибут, но никакое checkedсвойство не [attr.checked]="..."является правильным способом для этого конкретного случая.

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

Общая ошибка также в том, что для [attr.xxx]="..."привязок значение ( ...) всегда строковое. Только свойства и @Input()s могут получать другие типы значений, такие как логическое, число, объект, ...

Большинство свойств и атрибутов элементов связаны и имеют одинаковые имена.

Свойство-связь атрибута

При привязке к атрибуту свойство также получает только строковое значение из атрибута.
При связывании со свойством свойство получает привязанное к нему значение (логическое значение, число, объект, ...), а атрибут снова получает строковое значение.

Два случая, когда имена атрибутов и свойств не совпадают.

• Ошибка при добавлении атрибута «for» к метке в шаблоне angular 2.0

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (см. первое предложение описания htmlFor property reflects the value of the for- forвероятно, не сработало, потому что это ключевое слово в C или JavaScript)

• Почему colspan не является известным нативным атрибутом в Angular 2?

С тех пор Angular был изменен и знает об этих особых случаях и обрабатывает их, так что вы можете связываться с ними, <label [for]="даже если такого свойства не существует (то же самое для colspan)

в атрибуте angular-2 синтаксис

<div [attr.role]="myAriaRole">

Привязывает роль атрибута к результату выражения myAriaRole.

так можно использовать как

[attr.role]="myAriaRole ? true: null"

Уточняющий ответ Гюнтера Цохбауэра:

Похоже, сейчас все по-другому. Я пытался сделать это, чтобы условно применить атрибут href к тегу привязки. Вы должны использовать undefined для случая «не применять». В качестве примера я продемонстрирую со ссылкой, условно применяя атрибут href.

Якорный тег без атрибута href становится простым текстом, указывающим местозаполнитель для ссылки, согласно спецификации гиперссылки .

Для моей навигации у меня есть список ссылок, но одна из этих ссылок представляет текущую страницу. Я не хотел, чтобы ссылка на текущую страницу была ссылкой, но все же хочу, чтобы она появилась в списке (у нее есть несколько пользовательских стилей, но этот пример упрощен).

<a [attr.href]="currentUrl !== link.url ? link.url : undefined">

Думаю, это чище, чем использование двух * ngIf для тега span и anchor.

Если это элемент ввода, вы можете написать что-то вроде .... <input type="radio" [checked]="condition"> Значение условия должно быть истинным или ложным.

Также для атрибутов стиля ... <h4 [style.color]="'red'">Some text</h4>

Вы можете использовать это.

<span [attr.checked]="val? true : false"> </span>

Вы можете использовать лучший подход для тех, кто пишет HTML для уже существующих scss.
HTML

[attr.role]="<boolean>"

СКС

[role = "true"] { ... }

Таким образом, вам не нужно <boolean> ? true : nullкаждый раз.

Здесь, абзац печатается только 'isValid' является истинным / он содержит любое значение

<p *ngIf="isValid ? true : false">Paragraph</p>

Я хотел иметь всплывающую подсказку только для определенного поля, как добавлено ниже в коде, но вы хотите иметь всплывающую подсказку для мультиплета, вы можете иметь массив valdidate, используя:

Несколько элементов, имеющих собственный атрибут data-tooltip :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Включает в себя (ключ)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']. IndexOf (key)> -1

иметь атрибут всплывающей подсказки на более чем 1 элементе.

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

Inline-Maps тоже удобны.

Они немного более четкие и читабельные.

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

Просто еще один способ выполнить то же самое, если вам не нравится троичный синтаксис или ngIfs (и т. Д.).