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

Ответ 1

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

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

или

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

Ответ 2

в синтаксисе angular -2

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

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

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

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Также удобны Inline-Maps.

Они немного более ясны и читаемы.

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

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