webentwicklung-frage-antwort-db.com.de

Warum ist Colspan in Angular 2 kein bekanntes natives Attribut?

Wenn wir folgenden Code versuchen:

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

oder dieses:

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

Wir finden bald heraus, dass "colspan kein bekanntes natives Attribut ist."

Aus den A2-Dokumenten erfahren wir, dass:

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 das stattdessen tun:

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

Welches ist fair genug.

Frage:

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 den HTML-Code darstellt.

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

Warum zeigt das DOM diese Inkonsistenz?

58
superluminary

** Ä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 htmlFor die Eigenschaft ist, die im DOM-Attribut for .. wiedergegeben wird. Siehe auch https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement für das htmlFor-Eigenschaft (im Abschnitt Properties)

Siehe auch Was ist der Unterschied zwischen Attribut und Eigenschaft?

colSpan der tatsächliche Eigenschaftsname

Gemäß https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElementcolSpan ist die Eigenschaft, die dem Attribut colspan entspricht (Großbuchstabe 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. Die Bindung an ein Attribut ist teuer, da Attribute im DOM widergespiegelt werden und eine Änderung im DOM zu einer Neubewertung der CSS-Stile führen kann, die möglicherweise nach der Änderung übereinstimmen, während Eigenschaften nur ein Wert in einem geänderten JavaScript-Objekt sind.
Mit attr. entscheiden Sie sich explizit für das teure Verhalten.

86

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

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

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

Das Chrom zeigt sowohl Attribute als auch Eigenschaften, wenn Sie es untersuchen.

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

but document.getElementById('xyz').id ergibt xyz Da es sich um eine Eigenschaft handelt

8

Attribute & Eigenschaften in Angular:

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

Da colspan keine DOM-Eigenschaft eines <td> ist, aber colSpan (Großbuchstabe S) eine ist, müssen Sie die colSpan-Eigenschaft verwenden. Hier ist ein <td> Element, das in chrome devtools angezeigt wird:

 enter image description here

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

Wenn Sie die Eigenschaftsbindung in Angular verwenden, binden Sie mit diesen DOM-Eigenschaften die Werte 1 bis 1. Um an die colSpan-Eigenschaft 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 zeigt das DOM diese Inkonsistenz?

  1. Aus Gründen der Konsistenz haben alle DOM-Eigenschaften ein niedrigeres Kamelgehäuse
  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-Code 2 DOM-Eigenschaften (classList, className) ergibt.
0