다음과 같은 코드를 시도하면 :
<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 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.
당신은 비싼 행동을 명시 적으로 선택.
답변
내 질문은 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이 이러한 불일치를 나타내는 이유는 무엇입니까?
- 일관성을 위해 모든 DOM 속성은 낮은 낙타 케이스입니다.
- 모든 속성이 1 : 1 방식으로 DOM 속성으로 변환 될 수있는 것은 아닙니다. 예를 들어 class 속성을 살펴보면 HTML의 class 속성이 2 개의 DOM 속성 (
classList
,className
)을 생성한다는 것을 예제 이미지에서 볼 수 있습니다 .