Comment ajouter un attribut conditionnel dans Angular 2?

Comment puis-je ajouter conditionnellement un attribut d'élément, par exemple celui checkedd'une case à cocher?

Les versions précédentes d'Angular avaient NgAttret je pense NgCheckedque toutes semblent fournir les fonctionnalités que je recherche. Cependant, ces attributs ne semblent pas exister dans Angular 2 et je ne vois aucun autre moyen de fournir cette fonctionnalité.

null le supprime:

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

ou

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

Allusion:

Attribut vs propriété

Lorsque l'élément HTML auquel vous ajoutez cette liaison n'a pas de propriété avec le nom utilisé dans la liaison ( checkeddans ce cas) et qu'aucun composant ou directive angulaire n'est appliqué au même élément qui a un @Input() checked;, alors [xxx]="..."ne peut pas être utilisé.

Voir aussi Quelle est la différence entre les propriétés et les attributs en HTML?

À quoi se lier quand il n'y a pas une telle propriété

Les alternatives sont [style.xxx]="...", [attr.xxx]="...", en [class.xxx]="..."fonction de ce que vous essayez d'accomplir.

Parce qu'il <input>n'a qu'un checkedattribut, mais aucune checkedpropriété [attr.checked]="..."n'est la bonne façon pour ce cas spécifique.

Les attributs ne peuvent gérer que des valeurs de chaîne

Un écueil courant est également que pour les [attr.xxx]="..."liaisons, la valeur ( ...) est toujours chaîne. Seules les propriétés et les @Input()s peuvent recevoir d'autres types de valeurs comme booléen, nombre, objet, ...

La plupart des propriétés et attributs des éléments sont connectés et portent le même nom.

Connexion d'attribut de propriété

Lorsqu'elle est liée à l'attribut, la propriété ne reçoit également que la valeur chaîne de l'attribut.
Lorsqu'elle est liée à la propriété, la propriété reçoit la valeur qui lui est liée (booléen, nombre, objet, ...) et l'attribut à nouveau la valeur chaîne.

Deux cas où les noms d'attribut et de propriété ne correspondent pas.

• Erreur lors de l'ajout de l'attribut "for" à l'étiquette dans le modèle angulaire 2.0

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (voir la première phrase de la description htmlFor property reflects the value of the for- forn'a probablement pas fonctionné car il s'agit d'un mot clé en C ou JavaScript)

• Pourquoi colspan n'est-il pas un attribut natif connu dans Angular 2?

L'angulaire a été modifié depuis et connaît ces cas spéciaux et les gère pour que vous puissiez vous lier <label [for]="même si aucune propriété de ce type n'existe (idem pour colspan)

dans la syntaxe d'attribut angular-2 est

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

Lie le rôle d'attribut au résultat de l'expression myAriaRole.

peut donc utiliser comme

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

Affiner la réponse de Günter Zöchbauer:

Cela semble être différent maintenant. J'essayais de faire cela pour appliquer conditionnellement un attribut href à une balise d'ancrage. Vous devez utiliser undefined pour le cas «ne s'applique pas». À titre d'exemple, je vais démontrer avec un lien ayant conditionnellement un attribut href appliqué.

Une balise d'ancrage sans attribut href devient du texte brut, indiquant un espace réservé pour un lien, selon les spécifications du lien hypertexte .

Pour ma navigation, j'ai une liste de liens, mais l'un de ces liens représente la page actuelle. Je ne voulais pas que le lien de la page actuelle soit un lien, mais je veux quand même qu'il apparaisse dans la liste (il a des styles personnalisés, mais cet exemple est simplifié).

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

C'est plus propre que d'utiliser deux * ngIf sur une balise span et d'ancrage, je pense.

S'il s'agit d'un élément d'entrée, vous pouvez écrire quelque chose comme .... <input type="radio" [checked]="condition">La valeur de condition doit être vraie ou fausse.

Aussi pour les attributs de style ... <h4 [style.color]="'red'">Some text</h4>

vous pouvez l'utiliser.

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

Vous pouvez utiliser une meilleure approche pour quelqu'un qui écrit du HTML pour un scss déjà existant.
html

[attr.role]="<boolean>"

scss

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

De cette façon, vous n'en avez pas besoin à <boolean> ? true : nullchaque fois.

Ici, le paragraphe est imprimé uniquement «isValid» est vrai / il contient n'importe quelle valeur

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

Je voulais avoir une info-bulle uniquement pour un champ particulier comme ajouté ci-dessous dans le code, mais vous voulez avoir une info-bulle sur le multiplicateur, vous pouvez avoir un tableau valdidate en utilisant:

Plusieurs éléments ayant un attribut d' info-bulle de données personnalisé :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Inclut (clé)

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

pour avoir l'attribut info-bulle sur plus d'un élément.

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

Les cartes en ligne sont également pratiques.

Ils sont également un peu plus explicites et lisibles.

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

Juste une autre façon d'accomplir la même chose, au cas où vous n'aimeriez pas la syntaxe ternaire ou ngIfs (etc).