[解決済み] Angular 2でcolspanが既知のネイティブ属性でないのはなぜですか？

質問

このようなコードを試すと

<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を見ることができるのでしょうか？

なぜ DOM はこのような矛盾を示すのでしょうか。

どうすれば解決するのか？

**類似の例 <label for=...>

プロパティと属性は常に1:1であるとは限りません。よく遭遇する例として、labelタグの

<label for="someId">

Angularでは

<label [for]="someId"> 

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

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

または

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

しかし

<label [htmlFor]="someId">

も動作します。 htmlFor が DOM に反映されるプロパティだからです。 for 属性に反映されます。 参照 https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement については htmlFor プロパティを指定します ( Properties セクション)

参照 attributeとpropertyの違いは何ですか？

colSpan 実際のプロパティ名

によると https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement colSpan に反映されるプロパティは colspan 属性に反映されるため、（大文字の S )

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

参照 https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview

はうまく機能します。

なぜAngularはデフォルトでプロパティにバインドするのですか？

Angularはパフォーマンス上の理由から、デフォルトでプロパティにバインドします。属性へのバインドはコストがかかります。属性はDOMに反映され、DOMの変更は変更後に一致するかもしれないCSSスタイルの再評価を引き起こすことがありますが、プロパティは変更されたJavaScriptオブジェクトの値に過ぎないからです。

とは attr. では、高価な動作を明示的に選択することになります。