web-dev-qa-db-fra.com

Pourquoi colspan n'est-il pas un attribut natif connu dans Angular 2?

Si nous essayons un code comme celui-ci:

<td [colspan]="1 + 1">Column</td>

ou ca:

<td colspan="{{1 + 1}}">Column</td>

Nous découvrons bientôt que "colspan n'est pas un attribut natif connu".

La documentation A2 nous apprend que:

l'élément n'a pas de propriété colspan. Il possède l'attribut "colspan", mais l'interpolation et la liaison de propriétés ne peuvent définir que des propriétés, pas des attributs.

Nous devons plutôt faire ceci:

<td [attr.colspan]="1 + 1">Column</td>

Ce qui est assez juste.

Question:

Ma question est la suivante: pourquoi colspan n’est-il pas un attribut du DOM et, s’il manque, comment le navigateur peut-il restituer des tables, puisque le navigateur affiche le DOM et non le HTML?

De plus, si j'ouvre l'inspecteur de Google Chrome et que j'accède à l'onglet Propriétés, pourquoi puis-je considérer colspan comme une propriété de l'élément?

Pourquoi le DOM présente-t-il cette incohérence?

javascriptangulardom
58
superluminary

** Exemple similaire <label for=...>

La propriété et l'attribut ne sont pas toujours 1: 1. Un exemple souvent rencontré est la balise label

<label for="someId">

En angulaire 

<label [for]="someId">

échoue avec la même erreur et vous auriez besoin de lier comme

<label attr.for="{{someId}}">

ou

<label [attr.for]="someId">

mais 

<label [htmlFor]="someId">

cela fonctionnerait aussi car dans ce cas, htmlFor est la propriété qui est reflétée dans l'attribut DOM for . Voir aussi https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement pour htmlFor property (dans la section Properties)

Voir aussi Quelle est la différence entre attribut et propriété?

colSpan le nom de la propriété réelle

Selon https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElementcolSpan est la propriété reflétée sur l'attribut colspan et donc (majuscule S)

<td [colSpan]="1 + 1">Column</td>

Voir aussi https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview

fonctionne très bien.

Pourquoi Angular se lie-t-il aux propriétés par défaut

Angular se lie à la propriété par défaut pour des raisons de performances. La liaison à un attribut est coûteuse car les attributs sont reflétés dans le DOM et une modification de celui-ci peut entraîner la réévaluation des styles CSS susceptibles de correspondre après la modification, alors que les propriétés ne sont qu'une valeur dans un objet JavaScript modifié.
Avec attr. vous optez explicitement pour le comportement coûteux.

86
Günter Zöchbauer

Ma question est la suivante: pourquoi colspan n’est-il pas un attribut du DOM et s’il est manquant, comment le navigateur peut éventuellement rendre des tables, depuis le navigateur rend le DOM et non le HTML?

Colspan est un attribut du DOM, mais ce n'est pas une propriété. Il est donc en lecture seule et le navigateur le restitue car il s'agit d'un attribut.

De plus, si j'ouvre l'inspecteur de Google Chrome et que j'accède à l'onglet Propriétés, pourquoi puis-je considérer colspan comme une propriété de l'élément?

Le chrome affiche les attributs et les propriétés lorsque vous l'inspectez.

Si vous envisagez de suivre,

<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 résulte en undefined Comme ce n'est pas une propriété

but document.getElementById('xyz').id résulte en xyz Comme c'est une propriété

8
Low Flying Pelican

Attributs & propriétés en angulaire:

Lorsque le navigateur analyse le code HTML, il crée une représentation DOM en mémoire du code HTML analysé. Les données des attributs deviennent souvent des valeurs initiales pour les propriétés présentes dans le DOM.

Puisque colspan n'est pas une propriété DOM d'un <td>, mais que vous devrez utiliser la propriété colSpan (lettre majuscule S). Voici un élément <td> affiché dans chrome devtools:

 enter image description here

Nous pouvons voir que les attributs HTML sont enregistrés dans la propriété d'attribut DOM. Il est important de réaliser que le colspan actuel est reflété dans la propriété DOM colSpan, qui peut être observée ci-dessous dans l'image. 

Lorsque vous utilisez la liaison de propriété dans Angular, vous liez littéralement 1 à 1 avec ces propriétés DOM. Ainsi, afin de nous lier à la propriété colSpan, nous aurions besoin de la syntaxe suivante:

<td [colSpan]="1 + 1">Column</td>

Nous pouvons également nous lier directement aux attributs dans Angular, comme vous l'avez indiqué avec la syntaxe suivante:

<td [attr.colspan]="1 + 1">Column</td>

Pourquoi le DOM présente-t-il cette incohérence?

  1. Pour des raisons de cohérence, toutes les propriétés DOM sont à la casse inférieure.
  2. Tous les attributs ne peuvent pas être transformés en propriétés DOM de façon personnalisée. Prenons, par exemple, l'attribut class, nous pouvons voir dans l'exemple d'image que l'attribut class dans notre code HTML génère 2 propriétés DOM (classList, className).
0
Willem van der Veen