Warum ist Colspan in Angular 2 kein bekanntes natives Attribut?

78

Wenn wir Code wie diesen versuchen:

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

oder dieses:

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

Wir stellen bald fest, dass " colspankein bekanntes natives Attribut ist".

Aus den A2-Dokumenten erfahren wir Folgendes:

Das Element hat keine Colspan-Eigenschaft. Es hat das Attribut "colspan", aber Interpolation und Eigenschaftsbindung können nur Eigenschaften festlegen, keine Attribute.

Wir müssen stattdessen Folgendes tun:

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

Welches ist fair genug.

Frage:

Meine Frage ist, warum ist colspankein Attribut des DOM, und wenn es fehlt, wie kann der Browser möglicherweise Tabellen rendern, da der Browser das DOM und nicht das HTML rendert?

Wenn ich meinen Chrome-Inspektor öffne und zur Registerkarte "Eigenschaften" gehe, warum kann ich Colspan als Eigenschaft des Elements anzeigen?

Warum weist das DOM diese Inkonsistenz auf?

javascript angular dom überleuchtet
quelle

Antworten:

114

** Ähnliches Beispiel <label for=...>

Eigenschaft und Attribut sind nicht immer 1: 1. Ein häufig anzutreffendes Beispiel ist das Label-Tag

<label for="someId">

In Angular 

<label [for]="someId">

schlägt mit dem gleichen Fehler fehl und Sie müssten wie binden

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

oder

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

aber 

<label [htmlFor]="someId">

würde auch funktionieren, da in diesem Fall htmlFordie Eigenschaft das DOM- forAttribut widerspiegelt . Siehe auch https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement für die htmlForEigenschaft (im PropertiesAbschnitt)

Siehe auch Was ist der Unterschied zwischen Attribut und Eigenschaft?

colSpan der tatsächliche Eigenschaftsname

Laut https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement colSpan ist die Eigenschaft, die sich daher auf das colspanAttribut auswirkt (Großbuchstaben S)

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

Siehe auch https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview

funktioniert gut.

Warum bindet Angular standardmäßig an Eigenschaften?

Angular wird aus Leistungsgründen standardmäßig an die Eigenschaft gebunden. Das Binden an ein Attribut ist teuer, da Attribute im DOM wiedergegeben werden und eine Änderung im DOM zu einer Neubewertung von CSS-Stilen führen kann, die nach der Änderung möglicherweise übereinstimmen, während Eigenschaften nur ein Wert in einem JavaScript-Objekt sind, das sich geändert hat.
Mit attr.Ihnen entscheiden Sie sich explizit für das teure Verhalten.

Günter Zöchbauer
quelle
2
Das Wissen von [attr.for] hat mir den Tag gerettet. Ich hatte meine Haare mit dem Fehler "Kann nicht an 'contenteditable' binden, da es keine bekannte Eigenschaft von 'td' ist" gezogen
hirikarate
forsollte jetzt funktionieren. Kürzlich wurde ein Alias ​​hinzugefügt.
Günter Zöchbauer
1
Das Gleiche gilt für Rowspan ... [attr.rowspan] = "4"
JOpuckman
1
Ich mag Antworten, bei denen Sie tatsächlich die richtigen Hintergrundinformationen darüber erhalten, warum einige alternative Lösungen nicht unbedingt die beste Wahl sind.
Wilt
8

Meine Frage ist, warum Colspan kein Attribut des DOM ist und wenn es fehlt, wie kann der Browser möglicherweise Tabellen rendern, da der Browser das DOM und nicht das HTML rendert?

Colspan ist ein Attribut des DOM, aber keine Eigenschaft. Daher ist es schreibgeschützt und wird vom Browser gerendert, da es sich um ein Attribut handelt.

Wenn ich meinen Chrome-Inspektor öffne und zur Registerkarte "Eigenschaften" gehe, warum kann ich Colspan als Eigenschaft des Elements anzeigen?

Das Chrom zeigt sowohl Attribute als auch Eigenschaften an, wenn Sie es überprüfen.

Wenn Sie Folgendes in Betracht ziehen,

<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').colspanErgebnisse in undefined Da es keine Eigenschaft ist

but document.getElementById('xyz').idErgebnisse in xyz Da es eine Eigenschaft ist

Niedrig fliegender Pelikan
quelle
Chrom zeigt sowohl Attribute als auch Eigenschaften. Ist dies ein Fehler in Chrom?
Shaijut
4

Attribute und Eigenschaften in Angular:

Wenn der Browser den HTML-Code analysiert, wird eine DOM-Darstellung des analysierten HTML-Codes im Speicher erstellt. Was die Daten aus den Attributen häufig zu Anfangswerten für Eigenschaften werden, die im DOM vorhanden sind.

Da Colspan keine DOM-Eigenschaft von a ist <td> sondern colSpan (Großbuchstabe S) eine ist, müssen Sie die colSpan-Eigenschaft verwenden. Hier ist ein <td>Element, das in Chrome Devtools gezeigt wird:

Geben Sie hier die Bildbeschreibung ein

Wir können sehen, dass die HTML-Attribute in der Attribut-DOM-Eigenschaft gespeichert sind. Es ist wichtig zu wissen, dass sich der aktuelle Colspan in der DOM colSpan-Eigenschaft widerspiegelt, die unten im Bild zu sehen ist.

Wenn Sie die Eigenschaftsbindung in Angular verwenden, binden Sie mit diesen DOM-Eigenschaften buchstäblich 1 zu 1. Um an die Eigenschaft colSpan zu binden, benötigen wir die folgende Syntax:

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

Wir können auch direkt an Attribute in Angular binden, wie Sie mit der folgenden Syntax hervorgehoben haben:

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

Warum weist das DOM diese Inkonsistenz auf?

  1. Aus Konsistenzgründen sind alle DOM-Eigenschaften in geringerer Kamelhülle
  2. Nicht alle Attribute können 1: 1 in DOM-Eigenschaften umgewandelt werden. Nehmen wir zum Beispiel das Klassenattribut, wir können im Beispielbild sehen, dass das Klassenattribut in unserem HTML zu 2 DOM-Eigenschaften ( classList, className) führt.
Willem van der Veen
quelle