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>
충분히 공평합니다.
질문:
내 질문은 왜 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 <td>은의 DOM 속성이 아니지만 colSpan (대문자 S)이 하나이기 때문에 colSpan 속성을 사용해야합니다. 다음은 <td>chrome devtools에 표시된 요소입니다.
We can see that the html attributes are saved in the attribute DOM property. It is important to realise that the current colspan is reflecting in the DOM colSpan property which can be observed below in the image.
When you are using property binding in Angular you are binding literaly 1 to 1 with these DOM properties. So in order to bind to the colSpan property we would need the following syntax:
<td [colSpan]="1 + 1">Column</td>
We can also bind directly to attributes in Angular, as you pointed out with the following syntax:
<td [attr.colspan]="1 + 1">Column</td>
Why does the DOM exhibit this inconsistency?
- For consistency reasons all DOM properties are lower camel cased
- Not all attributes can be transformed into DOM properties in a 1 to 1 fashion. Take for example the class attribute, we can see in the example image that the class attribute in our HTML results in 2 DOM properties (
classList,className).
'Program Tip' 카테고리의 다른 글
| jQuery 객체 병합 (0) | 2020.11.25 |
|---|---|
| RAISERROR의 철자가 잘못된 이유는 무엇입니까? (0) | 2020.11.25 |
| "int * p = + s;"는 무엇입니까? (0) | 2020.11.24 |
| 새로운 기능이없는 C ++ 개체 (0) | 2020.11.24 |
| 기능을 삭제하지 않고 specflow (Gherkin)에서 기능을 비활성화하려면 어떻게합니까? (0) | 2020.11.24 |