web-dev-qa-db-fra.com

Impossible de se lier à 'disabled' car ce n'est pas une propriété connue de 'li'

J'ai ajouté [disabled] propriété à li élément. Mais je reçois cette erreur:

Impossible de se lier à 'disabled' car ce n'est pas une propriété connue de 'li'.

Ceci est ma partie de code:

<li [disabled]="pager.currentPage > 1">
</li>

Quelqu'un peut-il m'aider?

angular
24
vaqifrv

L'élément <li> Ne possède pas de propriété disabled.
Soit un composant ou une directive que vous vous attendez à appliquer à <li N'a en fait pas été appliqué, ou peut-être que l'attribut disabled devrait être défini à la place de la propriété

<li [attr.disabled]="pager.currentPage > 1 ? true : null">

null consiste à supprimer l'attribut si la condition est fausse. Un booléen false conduirait à

<li disabled="false">

ce qui pourrait ne pas être ce que vous voulez. Avec null vous obtenez

<li>
46
Günter Zöchbauer

Ajouter la réponse de Gunter. La propriété désactivée n’a de sens que pour les balises HTML comportant des actions susceptibles d’être désactivées.

Éléments handicapés

Un élément est dit réellement désactivé s’il entre dans l’une des catégories suivantes:

  • éléments de bouton désactivés
  • éléments d'entrée désactivés
  • sélectionner des éléments désactivés
  • éléments textarea qui sont désactivés
  • eléments optgroup ayant un attribut désactivé
  • éléments d'option qui sont désactivés
  • éléments fieldset ayant un attribut désactivé

https://www.w3.org/TR/html5/disabled-elements.html

Donc, cela n’a aucun sens de rendre une li handicapée car elle n’a aucune action pour commencer.

Une autre façon de comprendre cela est que la propriété désactivée est en réalité une propriété @Input définie par des directives relatives au formulaire, telles que FormControl ou FormControlName et ..., donc Si vous n'utilisez pas ces directives, vous ne pouvez pas désactiver les attributs.

Par exemple, une entrée peut avoir une propriété désactivée car elle peut avoir NgModel, mais un attribut li ou div ne peut pas être désactivé, car elle ne peut jamais avoir un NgModel!

Donc, pour que [disabled] fonctionne, angular vérifierait deux choses:

1- Est-ce que est désactivé une directive définie par Angular2 ou définie par vous? ( non ) .

2- Est-ce que est désactivé un @ input ​​défini par une autre directive utilisée au même niveau dans la balise ( comme NgModel, FormControl et ..)? (oui, il est défini, mais vous ne les utilisez pas car li ne peut pas avoir FormControl!).

Alors alors Angular2 lancerait une erreur.

Là où, quand vous faites [attr.disabled], ce n'est plus un @ Input ​​et c'est juste un attribut HTML normal, comme tous les autres attributs normaux.

Donc, si vous avez seulement besoin de la propriété désactivée en tant qu'attribut html normal pour faire des trucs en CSS, vous devez utiliser [attr.disabled] .

13
Milad