angular - reactivos - No se puede enlazar a ''deshabilitado'' ya que no es una propiedad conocida de ''li''

pasar parametros entre componentes angular 4

Question

[disabled] propiedad [disabled] a li element. Pero me sale este error:

No se puede enlazar a ''deshabilitado'' ya que no es una propiedad conocida de ''li''.

Esta es mi parte del código:

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

¿Alguien puede ayudarme?

Answer 1

El elemento <li> no tiene una propiedad disabled .
O un componente o directiva que espera que se aplique a <li realidad no se aplicó, o quizás el atributo disabled debería establecerse en lugar de la propiedad

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

null es eliminar el atributo en caso de que la condición sea falsa. Un false booleano conduciría a

<li disabled="false">

Lo que tal vez no sea lo que quieres. Con null obtienes

<li>

Answer 2

Para agregar la respuesta del Gunter. La propiedad deshabilitada solo tiene sentido para las etiquetas html que tienen acciones que podrían deshabilitarse.

Elementos deshabilitados

Se dice que un elemento está realmente deshabilitado si cae en una de las siguientes categorías:

• elementos del botón que están deshabilitados
• elementos de entrada que están deshabilitados
• seleccionar elementos que están deshabilitados
• Elementos de área de texto que están deshabilitados.
• Elementos del grupo opt que tienen un atributo deshabilitado.
• Elementos opcionales que están deshabilitados.
• Elementos de conjunto de campos que tienen un atributo deshabilitado

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

Por lo tanto, no tiene sentido hacer un li deshabilitado porque no tiene ninguna acción para empezar.

Otra forma de entender esto es que la propiedad deshabilitada es en realidad una propiedad @Input que se define mediante directivas relacionadas con formularios, como FormControl o FormControlName y ..., por lo que si no usa esas directivas, no puede tener atributos deshabilitados.

Por ejemplo, una entrada puede tener una propiedad deshabilitada porque puede tener NgModel, pero un li o un div no puede tener un atributo deshabilitado, ¡porque nunca puede tener un NgModel!

Entonces para que [deshabilitado] funcione, angular verificará dos cosas:

1- ¿Está deshabilitada una directiva definida por Angular2 o definida por usted? ( no ) .

2- ¿Está deshabilitada una @input que está definida por otra directiva que se usa al mismo nivel en la etiqueta (como NgModel, FormControl y ...)? (sí, está definido, pero no los está utilizando porque li no puede tener FormControl!).

Entonces Angular2 arrojaría un error.

Donde, cuando haces [attr.disabled] , esto ya no es un @Input y es solo un atributo html normal como todos los demás atributos normales.

Entonces, si solo necesita una propiedad deshabilitada como un atributo html normal para hacer algunas cosas de css con ella, debe usar [attr.disabled] .