[javascript] Colspan이 Angular 2에서 알려진 기본 속성이 아닌 이유는 무엇입니까?

Program / 글쓴이

다음과 같은 코드를 시도하면 :

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

아니면 이거:

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

곧 ” colspan이 (가) 알려진 기본 속성이 아님 “을 알게됩니다 .

A2 문서에서 우리는 다음을 배웁니다.

요소에 colspan 속성이 없습니다. “colspan”속성이 있지만 보간 및 속성 바인딩은 속성이 아닌 속성 만 설정할 수 있습니다.

대신 다음을 수행해야합니다.

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

충분히 공평합니다.

질문:

내 질문은 왜 colspanDOM의 속성 이 아니고, 그것이 없으면 브라우저가 HTML이 아닌 DOM을 렌더링하기 때문에 브라우저가 테이블을 어떻게 렌더링 할 수 있습니까?

또한 Chrome 관리자를 열고 속성 탭으로 이동하면 colspan이 요소의 속성으로 표시되는 이유는 무엇입니까?

DOM이 이러한 불일치를 나타내는 이유는 무엇입니까?

답변

** 유사한 예 <label for=...>

속성과 속성이 항상 1 : 1은 아닙니다. 자주 접하는 예는 라벨 태그입니다.

<label for="someId">

Angular에서 

<label [for]="someId">

동일한 오류로 실패하고 다음과 같이 바인딩해야합니다.

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

또는

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

그러나 

<label [htmlFor]="someId">

이 경우 htmlForDOM 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.당신은 비싼 행동을 명시 적으로 선택.

답변

내 질문은 colspan이 DOM의 속성이 아닌 이유이며 이것이 없으면 브라우저가 HTML이 아닌 DOM을 렌더링하기 때문에 브라우저가 테이블을 어떻게 렌더링 할 수 있습니까?

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
는 속성이기 때문에

답변

Angular의 속성 및 속성 :

브라우저가 HTML을 파싱 할 때 파싱 된 HTML의 메모리 DOM 표현을 생성합니다. 속성의 데이터가 DOM에있는 속성의 초기 값이되는 경우가 많습니다.

colspan은 DOM 속성이 <td>아니지만 colSpan (대문자 S)이 하나이기 때문에 colSpan 속성을 사용해야합니다. 다음은 <td>chrome devtools에 표시된 요소입니다.

여기에 이미지 설명 입력

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 속성으로 변환 될 수있는 것은 아닙니다. 예를 들어 class 속성을 살펴보면 HTML의 class 속성이 2 개의 DOM 속성 ( classList, className)을 생성한다는 것을 예제 이미지에서 볼 수 있습니다 .

답변