javascript - ¿Por qué colspan no es un atributo nativo conocido en Angular 2?
colspan angular 4 (3)
Si intentamos un código como este:
<td [colspan]="1 + 1">Column</td>
o esto:
<td colspan="{{1 + 1}}">Column</td>
Pronto descubrimos que "
colspan
no es un atributo nativo conocido".
De los documentos A2 aprendemos que:
el elemento no tiene una propiedad colspan. Tiene el atributo "colspan", pero la interpolación y el enlace de propiedades solo pueden establecer propiedades, no atributos.
En cambio, debemos hacer esto:
<td [attr.colspan]="1 + 1">Column</td>
Lo cual es bastante justo.
Pregunta:
Mi pregunta es, ¿por qué
colspan
no es un atributo del DOM, y si falta, cómo puede el navegador posiblemente representar tablas, ya que el navegador representa el DOM y no el HTML?
Además, si abro mi inspector de Chrome y voy a la pestaña de propiedades, ¿por qué puedo ver colspan como una propiedad del Elemento?
¿Por qué el DOM exhibe esta inconsistencia?
Mi pregunta es, ¿por qué colspan no es un atributo del DOM, y si falta, cómo puede el navegador posiblemente representar tablas, ya que el navegador representa el DOM y no el HTML?
Colspan es un atributo del DOM pero no es una propiedad, por lo que es de solo lectura y el navegador lo representa porque es un atributo.
Además, si abro mi inspector de Chrome y voy a la pestaña de propiedades, ¿por qué puedo ver colspan como una propiedad del Elemento?
El cromo muestra atributos y propiedades cuando lo inspeccionas.
Si consideras seguir,
<html>
<head>
</head>
<body>
<table>
<tr><th>A</th><th>A</th></tr>
<tr><td colspan="2" id="xyz">B</td></tr>
</table>
</body>
</html>
document.getElementById(''xyz'').colspan
da como resultado
undefined
ya que no es una propiedad
but document.getElementById(''xyz'').id
da como resultado
xyz
ya que es una propiedad
Atributos y propiedades en Angular:
Cuando el navegador analiza el HTML, creará una representación DOM en memoria del HTML analizado. Lo que los datos de los atributos a menudo se convertirán en valores iniciales para las propiedades que están presentes en el DOM.
Como colspan no es una propiedad DOM de un
<td>
pero colSpan (letra S mayúscula) es una que tendrá que usar la propiedad colSpan
Aquí hay un elemento
<td>
que se muestra en las devtools de Chrome:
Podemos ver que los atributos html se guardan en la propiedad DOM del atributo. Es importante tener en cuenta que el colspan actual se refleja en la propiedad DOM colSpan que se puede observar a continuación en la imagen.
Cuando utiliza el enlace de propiedades en Angular, está enlazando literalmente 1 a 1 con estas propiedades DOM. Entonces, para unirnos a la propiedad colSpan, necesitaríamos la siguiente sintaxis:
<td [colSpan]="1 + 1">Column</td>
También podemos enlazar directamente a los atributos en Angular, como usted señaló con la siguiente sintaxis:
<td [attr.colspan]="1 + 1">Column</td>
¿Por qué el DOM exhibe esta inconsistencia?
- Por razones de coherencia, todas las propiedades del DOM son de camello inferior.
-
No todos los atributos se pueden transformar en propiedades DOM de una manera 1 a 1.
Tomemos como ejemplo el atributo de clase, podemos ver en la imagen de ejemplo que el atributo de clase en nuestro HTML da como resultado 2 propiedades DOM (
classList,className).
** Ejemplo similar
<label for=...>
Propiedad y atributo no siempre son 1: 1. Un ejemplo frecuente es la etiqueta
<label for="someId">
En angular
<label [for]="someId">
falla con el mismo error y tendrías que vincular como
<label attr.for="{{someId}}">
o
<label [attr.for]="someId">
pero
<label [htmlFor]="someId">
también funcionaría porque en este caso
htmlFor
es la propiedad que se refleja en el DOM
for
atributo.
Consulte también
https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement
para la propiedad
htmlFor
(en la sección
Properties
)
Consulte también ¿Cuál es la diferencia entre atributo y propiedad?
colSpan
el nombre real de la propiedad
De acuerdo con
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement
colSpan
es la propiedad que se refleja en el atributo
colspan
por lo tanto (
S
mayúscula)
<td [colSpan]="1 + 1">Column</td>
Ver también https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview
funciona bien
¿Por qué Angular se une a las propiedades de forma predeterminada?
Angular se une a la propiedad de forma predeterminada por motivos de rendimiento.
El enlace a un atributo es costoso porque los atributos se reflejan en el DOM y un cambio en el DOM puede causar una reevaluación de los estilos CSS que pueden coincidir después del cambio, mientras que las propiedades son solo un valor en un objeto JavaScript que cambió.
Con
attr.
usted opta explícitamente por el costoso comportamiento.