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

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

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

2 52
javascript angularjs dom

2 ответа:

**подобный пример <label for=...>

свойство и атрибут не всегда 1:1. Один из часто встречающихся примеров-это тег метка

<label for="someId">

Угловое 

<label [for]="someId">

терпит неудачу с той же ошибкой, и вам нужно будет привязать как

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

или

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

но 

<label [htmlFor]="someId">

также будет работать, потому что в этом случае htmlFor это свойство, которое отражается в DOM . Смотреть также https://developer.mozilla.org/de/docs/Web/API/HTMLLabelElement для htmlFor свойство (в )

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

colSpan фактическое имя свойства

согласно https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement colSpan свойство, которое отражается в поэтому (прописные S)

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

Смотрите также https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview

работает просто отлично.

почему угловая привязка к свойствам по умолчанию

угловые привязки к свойству по умолчанию По соображениям производительности. Привязка к атрибуту является дорогостоящей, поскольку атрибуты отражаются в DOM, а изменение DOM может привести к переоценке стилей CSS, которые может совпадать после изменения, в то время как свойства-это просто значение в объекте JavaScript, который изменился.
С attr. вы явно выбираете дорогостоящее поведение.

71

мой вопрос в том, почему 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 Так как это свойство

7