Comment ajouter un attribut conditionnel dans Angular 2?
Comment puis-je ajouter conditionnellement un attribut d'élément, par exemple le checked d'une case à cocher?
Les versions précédentes de Angular avaient NgAttr et je pense NgChecked qui semblent toutes fournir les fonctionnalités que je suis après. Cependant, ces attributs ne semblent pas exister dans Angular 2 et je ne vois pas d'autre moyen de fournir cette fonctionnalité.
null le supprime:
[attr.checked]="value ? '' : null"
ou
[attr.checked]="value ? 'checked' : null"
dans la syntaxe d'attribut angulaire-2 est
<div [attr.role]="myAriaRole">
Lie l'attribut role au résultat de l'expression myAriaRole.
alors peut utiliser comme
[attr.role]="myAriaRole ? true: null"
Raffinage Günter Zöchbauer réponse:
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 pas appliquer". À titre d'exemple, je vais démontrer avec un lien ayant conditionnellement un attribut href appliqué.
Une balise d'ancrage sans attribut href devient un texte brut indiquant un espace réservé pour un lien, conformément à hyperlink spec .
Pour ma navigation, j'ai une liste de liens, mais l'un de ces liens représente la page en cours. Je ne voulais pas que le lien de la page en cours soit un lien, mais je voulais tout de même qu'il apparaisse dans la liste (il comporte 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 anchor, je pense.
Si c'est un élément d'entrée, vous pouvez écrire quelque chose comme .... <input type="radio" [checked]="condition"> La valeur de condition doit être true ou false.
Aussi pour les attributs de style ... <h4 [style.color]="'red'">Some text</h4>
vous pouvez l'utiliser.
<span [attr.checked]="val? true : false"> </span>