Як додати умовний атрибут у Angular 2?

Як я можу умовно додати атрибут елемента, наприклад, checkedпрапорець?

Попередні версії Angular мали, NgAttrі я думаю, NgCheckedякі, здається, забезпечують функціонал, про який я хочу. Однак, схоже, ці атрибути не існують у Angular 2, і я не бачу іншого способу забезпечення цієї функціональності.

null видаляє його:

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

або

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

Підказка:

Атрибут vs власності

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

Дивіться також Яка різниця між властивостями та атрибутами в HTML?

З чим зв’язати, коли такої власності немає

Альтернативи [style.xxx]="...", [attr.xxx]="...", в [class.xxx]="..."залежності від того, що ви намагаєтеся досягти.

Тому що <input>має лише checkedатрибут, але жодна checkedвластивість не [attr.checked]="..."є правильним для цього конкретного випадку.

Атрибути можуть обробляти лише рядкові значення

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

Більшість властивостей та атрибутів елементів пов'язані між собою та мають однакову назву.

Зв'язок властивості-атрибута

Прив'язане до атрибута, властивість також отримує лише атрибутизоване значення.
Прив'язавшись до властивості, властивість отримує пов'язане з нею значення (булеве число, число, об'єкт, ...) і атрибут знову закреслене значення.

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

• Помилка під час додавання атрибута "for" для мітки в кутовому шаблоні 2.0

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

• Чому colspan не є відомим нативним атрибутом у куті 2?

Кутовий змінено з тих пір і знає про ці особливі випадки та обробляє їх, щоб ви могли прив’язатись, <label [for]="навіть якщо такої властивості не існує (те саме для colspan)

у синтаксисі атрибута angular-2 є

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

Прив'язує роль атрибута до результату вираження myAriaRole.

тому можна використовувати як

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

Уточнюючи відповідь Гюнтера Зехбауера:

Зараз, здається, це інакше. Я намагався це зробити, щоб умовно застосувати атрибут href до тега якоря. Ви повинні використовувати невизначений для випадку "не застосовувати". Як приклад, я продемонструю за допомогою посилання, умовно із застосованим атрибутом href.

Тег прив’язки без атрибута href стає простим текстом із зазначенням заповнювача для посилання на специфікацію гіперпосилання .

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

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

Я думаю, це чистіше, ніж використання двох * ngIf на тезі "span and 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>"

scss

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

Таким чином вам не потрібно <boolean> ? true : nullкожен раз.

Тут абзац друкується лише "isValid" - це правда / він містить будь-яке значення

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

Я хотів мати підказку лише для певного поля, як додано нижче в коді, але ви хочете мати підказку на multiplent, ви можете мати валідату масиву, використовуючи:

Кілька елементів, що мають спеціальний атрибут datatip 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-карти теж зручні.

Вони також трохи чіткіші та зручніші для читання.

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

Ще один спосіб досягти того ж, якщо вам не подобається потрійний синтаксис або ngIfs (тощо).