0
313
Views¿Por qué colspan no es un atributo nativo conocido en Angular 2?
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 su lugar, 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 es posible que el navegador muestre tablas, ya que el navegador muestra 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?
3 answers
Answer question0
**Ejemplo similar <label for=...>
La propiedad y el atributo no siempre son 1:1. Un ejemplo frecuente es la etiqueta de la etiqueta
<label for="someId">En Angular
<label [for]="someId">falla con el mismo error y necesitaría enlazar 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 el 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. La vinculación a un atributo es costosa porque los atributos se reflejan en el DOM y un cambio en el DOM puede provocar la reevaluación de los estilos CSS que podrían coincidir después del cambio, mientras que las propiedades son solo un valor en un objeto de JavaScript que cambió.
Con attr. usted opta explícitamente por el comportamiento costoso.
0
Mi pregunta es, ¿por qué colspan no es un atributo del DOM, y si falta, cómo es posible que el navegador muestre tablas, ya que el navegador muestra 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 inspecciona.
Si considera 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
0
Atributos y propiedades en Angular:
Cuando el navegador analiza el HTML, creará una representación DOM en la 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.
Dado que colspan no es una propiedad DOM de un <td> pero colSpan (letra mayúscula S) es una, tendrá que usar la propiedad colSpan. Aquí hay un elemento <td> que se muestra en las herramientas de desarrollo de Chrome:
Podemos ver que los atributos html se guardan en la propiedad DOM del atributo. Es importante darse cuenta de 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 propiedad en Angular, está enlazando literalmente 1 a 1 con estas propiedades DOM. Entonces, para vincularnos 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 señaló con la siguiente sintaxis:
<td [attr.colspan]="1 + 1">Column</td>¿Por qué el DOM exhibe esta inconsistencia?
- Por razones de consistencia, todas las propiedades DOM están en mayúsculas y minúsculas.
- No todos los atributos se pueden transformar en propiedades DOM de forma 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).