Почему colspan не является известным атрибутом native в 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, и если он отсутствует, как браузер может отображать таблицы, так как браузер отображает DOM, а не HTML?

Кроме того, если я открою свой инспектор Chrome и перейду на вкладку свойств, почему я могу увидеть colspan как свойство элемента?

Почему DOM демонстрирует эту несогласованность?

Ответ 1

** Аналогичный пример <label for=...>

Свойство и атрибут не всегда 1:1. Часто встречающимся примером является тег метки

<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)

См. также В чем разница между атрибутом и свойством?

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. вы решительно выбираете дорогостоящее поведение.

Ответ 2

Мой вопрос: почему colspan не является атрибутом DOM, и если это отсутствует, как браузер может отображать таблицы, поскольку браузер отображает DOM, а не HTML?

Colspan - это атрибут DOM, но он не является свойством, поэтому он читает только и браузер отображает его, потому что он является атрибутом.

Кроме того, если я открою свой инспектор Chrome и перейду на вкладку свойств, почему я могу увидеть colspan как свойство элемента?

Хром показывает оба атрибута и свойства при его проверке.

Если вы считаете следующее,

<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 Так как это свойство