web-dev-qa-db-ja.com

colspanがAngular 2の既知のネイティブ属性ではないのはなぜですか？

このようなコードを試みた場合：

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

またはこれ：

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

「colspanは既知のネイティブ属性ではない」ことがすぐにわかりました。

A2ドキュメントから次のことを学びます。

要素にはcolspanプロパティがありません。 「colspan」属性がありますが、補間とプロパティバインディングではプロパティのみを設定でき、属性は設定できません。

代わりにこれを行う必要があります。

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

これで十分です。

質問：

私の質問は、なぜcolspanがDOMの属性ではなく、ブラウザがHTMLではなくDOMをレンダリングするため、それが欠落している場合、ブラウザはどのようにテーブルをレンダリングできるのでしょうか？

また、Chromeインスペクターを開いて[プロパティ]タブに移動すると、colspanがElementのプロパティとして表示されるのはなぜですか？

DOMがこの矛盾を示すのはなぜですか？

javascriptangulardom
63
superluminary

**同様の例<label for=...>

プロパティと属性は常に1：1ではありません。よく遭遇する例はラベルタグです

<label for="someId">

角度で

<label [for]="someId">

同じエラーで失敗し、次のようにバインドする必要があります

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

または

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

しかし

<label [htmlFor]="someId">

この場合、htmlForはDOM for属性に反映されるプロパティであるため、機能します。 htmlForプロパティの https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement も参照してください（Propertiesセクション）

属性とプロパティの違いは何ですか？ も参照してください。

colSpan実際のプロパティ名

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElementcolSpanは、したがってcolspan属性に反映されるプロパティです（大文字S）

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

こちらもご覧ください https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview

うまく動作します。

Angularがデフォルトでプロパティにバインドする理由

パフォーマンス上の理由から、デフォルトではプロパティに角度がバインドされます。属性はDOMに反映され、DOMの変更は変更後に一致するCSSスタイルの再評価を引き起こす可能性がありますが、プロパティは変更されたJavaScriptオブジェクトの値にすぎないため、属性へのバインドは高価です。
attr.を使用すると、高価な動作を明示的に選択できます。

97
Günter Zöchbauer

私の質問は、なぜcolspanがDOMの属性ではないのか、そしてそれが欠落している場合、ブラウザはHTMLではなくDOMをレンダリングするので、ブラウザはどのようにテーブルをレンダリングできるのでしょうか？

ColspanはDOMの属性ですが、プロパティではないため、属性であるため読み取り専用であり、ブラウザーがレンダリングします。

また、Chromeインスペクターを開いて[プロパティ]タブに移動すると、colspanがElementのプロパティとして表示されるのはなぜですか？

chromeは、検査すると属性とプロパティの両方を表示します。

フォローを検討する場合、

<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はundefinedになります。プロパティではないため

but document.getElementById('xyz').idはxyzになります。プロパティであるため

8
Low Flying Pelican

Angularの属性とプロパティ：

ブラウザがHTMLを解析すると、解析されたHTMLのメモリ内DOM表現が作成されます。多くの場合、属性からのデータがDOMに存在するプロパティの初期値になります。

Colspanは<td>のDOMプロパティではありませんが、colSpan（大文字のS）はcolSpanプロパティを使用する必要があるためです。 chrome devtoolsに表示される<td>要素は次のとおりです。

enter image description here

Html属性が属性DOMプロパティに保存されていることがわかります。現在のcolspanがDOMのcolSpanプロパティに反映されていることを理解することが重要です。これは、以下の画像で確認できます。

Angularでプロパティバインディングを使用している場合、これらのDOMプロパティでリテラル1を1にバインドしています。したがって、colSpanプロパティにバインドするには、次の構文が必要です。

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

次の構文で指摘したように、Angularの属性に直接バインドすることもできます。

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

DOMがこの矛盾を示すのはなぜですか？

  1. 一貫性の理由から、すべてのDOMプロパティはキャメルケースです
  2. すべての属性を1対1の方法でDOMプロパティに変換できるわけではありません。クラス属性を例にとると、HTMLのクラス属性が2つのDOMプロパティ（classList、className）になることをサンプル画像で見ることができます。
1
Willem van der Veen