각도 2에서 colspan이 알려진 네이티브 속성이 아닌 이유는 무엇입니까?
만약 우리가 이런 코드를 시도한다면:
<td [colspan]="1 + 1">Column</td>
또는 이 항목:
<td colspan="{{1 + 1}}">Column</td>
우리는 곧 그것을 알게 됩니다."colspan알려진 네이티브 속성이 아닙니다."
A2 문서를 통해 다음과 같은 내용을 알 수 있습니다.
요소에 colspan 속성이 없습니다.colspan 속성이 있지만 보간 및 속성 바인딩은 속성이 아닌 속성만 설정할 수 있습니다.
우리는 대신 이렇게 해야 합니다.
<td [attr.colspan]="1 + 1">Column</td>
그 정도면 충분히 공평합니다.
질문:.
제 질문은, 왜?colspanDOM의 속성이 아니며, 만약 DOM이 누락되어 있다면, 브라우저는 HTML이 아닌 DOM을 렌더링하기 때문에 어떻게 테이블을 렌더링할 수 있습니까?
또한 Chrome inspector를 열고 properties 탭으로 이동하면 colspan을 Element의 속성으로 볼 수 있는 이유는 무엇입니까?
DOM이 이러한 불일치를 나타내는 이유는 무엇입니까?
**유사한 예<label for=...>
속성과 속성이 항상 1:1인 것은 아닙니다.자주 접하게 되는 예로는 라벨 태그가 있습니다.
<label for="someId">
각도에 있음
<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따라서 속성(uppercase)S)
<td [colSpan]="1 + 1">Column</td>
https://plnkr.co/edit/BZelYOraELdprw5GMKPr?p=preview 도 참조
잘 작동합니다.
기본적으로 Angular가 속성에 바인딩되는 이유
성능상의 이유로 기본적으로 Angular가 속성에 바인딩됩니다.속성에 바인딩하는 것은 속성이 DOM에 반영되고 DOM이 변경되면 변경 후 일치할 수 있는 CSS 스타일이 재평가될 수 있기 때문에 비용이 많이 듭니다. 반면 속성은 변경된 자바스크립트 개체의 값에 불과합니다.
와 함께attr.당신은 값비싼 행동에 대해 노골적으로 선택합니다.
제 질문은 왜 colspan은 DOM의 속성이 아니고, 만약 그것이 누락되어 있다면 브라우저가 HTML이 아닌 DOM을 렌더링하기 때문에 어떻게 테이블을 렌더링할 수 있는지 입니다.
Colspan은 DOM의 속성이지만 속성이 아니므로 읽기 전용이며 속성이기 때문에 브라우저에서 렌더링합니다.
또한 Chrome inspector를 열고 properties 탭으로 이동하면 colspan을 Element의 속성으로 볼 수 있는 이유는 무엇입니까?
크롬은 검사할 때 속성과 속성을 모두 보여줍니다.
만약 당신이 따를 것을 고려한다면,
<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의 Attribute & Properties:
브라우저는 HTML을 파싱할 때 파싱된 HTML의 인메모리 DOM 표현을 생성합니다. 속성의 데이터는 종종 DOM에 존재하는 속성의 초기값이 됩니다.
colspan은 DOM 속성이 아니기 때문에<td>그러나 colSpan( 대문자 S)은 colSpan 속성을 사용해야 합니다.여기 있습니다.<td>크롬 개발 도구에 표시된 요소:
html 속성이 속성 DOM 속성에 저장되어 있음을 알 수 있습니다.현재 콜스팬이 이미지 아래에서 관찰할 수 있는 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).
언급URL : https://stackoverflow.com/questions/35615751/why-is-colspan-not-a-known-native-attribute-in-angular-2
'programing' 카테고리의 다른 글
| MariaDB Analyze FORMAT=JSON 출력에서 전체 시간을 계산할 수 없습니다. (0) | 2023.11.07 |
|---|---|
| 1비트 길이의 데이터 타입을 C로 생성할 수 있습니까? (0) | 2023.11.07 |
| Python, 디렉토리 문자열에 후행 슬래시 추가, os 독립적으로 (0) | 2023.11.07 |
| Xcode의 All Exceptions 중단점을 사용할 때 특정 예외 무시 (0) | 2023.11.07 |
| *nnnng-template 출력에 대해 각도2가 없습니다. (0) | 2023.11.07 |