마우스 오버 시 구성 요소 필드를 기반으로 div 배경을 변경하는 방법

Question

마우스를 올리면 배경색이 바뀌는 div가 있는데, 구성요소의 요소에 따라 색상도 선택해야 합니다.

<div *ngFor="let u of users;" 
  [style:hover.background-color] = "u.selected ? 'red' : 'blue' ">
</div>

Answer 1

위 댓글 링크에서:

"실제로 이것은 Angular 문제가 아닙니다. 의사 요소는 DOM 트리의 일부가 아니므로 상호 작용하는 데 사용할 수 있는 DOM API를 노출하지 않습니다."

따라서 CSS 변수를 대신 사용할 수 있습니다:

스타일 파일: 으아악

템플릿: 으아악