Angular 2에서 단일 요소 CSS 클래스를 토글하는 방법은 무엇입니까?
dom_ahdigital
API 응답을 반복하고 다음 코드를 사용하여 페이지에 일부 항목 (여성 및 남성 연령 그룹)을 표시하고 있습니다.
<ng-container *ngFor="let event of day.availableEvents">
{{ event.name }}
<br>
<ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
<span [class.is-active]="status" (click)="updateStatus()" {{ maleAgeGroup }}</span>
</ng-container>
</ng-container>
그리고 이것은 내가 작업하고있는 JSON 데이터입니다.
"days": [
{
"date": "2021-04-14T00:00:00.000Z",
"availableEvents": [
{
"id": 1,
"name": "Event A",
"femaleAgeGroups": ["U13", "U15", "U17"],
"maleAgeGroups": ["U13", "U15", "U17"]
},
{
"id": 2,
"name": "Event B",
"femaleAgeGroups": ["U13", "U15", "U17"],
"maleAgeGroups": ["U13", "U15", "U17"]
},
]
}
]
연령 그룹을 클릭하면 is-activeCSS 클래스가 추가 / 제거 되도록 해당 상태를 true 또는 false로 전환하고 싶습니다 .
내가 시도하는 대답에 상관없이 작동하도록 할 수 없으며 대부분의 경우 '문자열에 상태를 할당 할 수 없음'과 같은 오류가 발생합니다. 이것이 바로 위의 코드를 기본으로 제거한 이유입니다. 데이터가 구조화 된 방식 때문일까요?
아래의 예는 강조 표시된 텍스트를 클릭하고 is-active클래스가 적용된 최종 결과입니다 .
Thibs
[class.is-active]값에 '결합'해야합니다. 전체적으로하려는 작업의 의도가 명확하지 않지만 각 연령 그룹에는 상태가 필요합니다. 따라서 서버에서 데이터를 업데이트 / 수정하거나 각 연령 그룹의 상태로 구성 요소를 보강해야합니다.
"femaleAgeGroups": [{name:"U13", active:true}, {name:"U15", active:false}, {name:"U17", active:false}], etc..
그런 다음 템플릿에서 css 클래스를 부울 값에 바인딩 할 수 있습니다.
<ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
<span [class.is-active]="maleAgeGroup.active" (click)="updateStatus(maleAgeGroup)" {{ maleAgeGroup.name }}</span>
</ng-container>
.. 업데이트하려면 항목을 전달하여 기능을 업데이트하고 활성 상태를 업데이트합니다.
updateStatus(item:any): void {
item.active = !item.active;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Angular에서 구성 요소의 CSS 스타일을 재정의하는 방법은 무엇입니까?
- 2
단일 클래스 속성에서 다른 XML 요소를 읽는 방법은 무엇입니까?
- 3
다른 CSS 파일 / 클래스로 요소를 재정의하지 않는 방법은 무엇입니까?
- 4
AngularDart의 다른 구성 요소에 CSS 클래스를 적용하는 방법은 무엇입니까?
- 5
구성 요소의 루트에 CSS 클래스를 추가하는 방법은 무엇입니까?
- 6
SQL 쿼리에서 단일 요소를 얻는 방법은 무엇입니까?
- 7
CSS를 통해 한 요소에 클래스가 없을 때 선택에서 첫 번째 요소를 선택하는 방법은 무엇입니까?
- 8
Angular에서 간단한 호스트 구성 요소를 만드는 방법은 무엇입니까?
- 9
CSS에서 제목 및 단락 요소를 인라인으로 표시하는 방법은 무엇입니까?
- 10
option-id 요소가 있지만 동일한 div 클래스를 갖는 xpath 및 selenium에서 요소를 클릭하는 방법은 무엇입니까?
- 11
css에서 h2 요소가 발생한 후 모든 홀수 p 요소를 스타일링하는 방법은 무엇입니까?
- 12
요소의 스타일에서 개별 CSS 필터 기능을 추출하는 방법은 무엇입니까?
- 13
JQuery에서 클래스를 클릭하여 두 요소의 CSS를 변경하는 방법은 무엇입니까?
- 14
Blogger에서 두 위젯 콘텐츠를 단일 DIV 요소로 래핑하는 방법은 무엇입니까?
- 15
스타일 또는 클래스 이름을 추가하고 웹 구성 요소에서 다른 요소를 제거하는 방법은 무엇입니까?
- 16
Angular의 전역 CSS 클래스 이름을 기반으로 구성 요소의 CSS를 조정하는 방법은 무엇입니까?
- 17
같은 클래스의 다른 단락에 영향을주지 않고 CSS에서 특정 단락 요소의 스타일을 지정하는 방법은 무엇입니까?
- 18
Angular의 단일 토스트 메시지에 사용자 지정 CSS를 추가하는 방법은 무엇입니까?
- 19
특정 클래스를 가진 다른 요소에 따라 한 요소의 CSS를 설정하는 방법은 무엇입니까?
- 20
Angular 2에서 서비스가 반환하는 배열 요소를 얻는 방법은 무엇입니까?
- 21
링크 함수 내에서 CSS 클래스로 요소 구성 요소를 선택 / 바꾸는 방법은 무엇입니까?
- 22
angular2 / 4에서 클릭 한 dom 요소를 전달하는 방법은 무엇입니까?
- 23
Angular에서 클릭시 글꼴 멋진 클래스를 전환하는 방법은 무엇입니까?
- 24
구성 요소에서 Angular 서비스, 사용자 정의 클래스를 초기화하는 방법은 무엇입니까?
- 25
모바일 장치에서 요소를 숨기는 방법은 무엇입니까? CSS
- 26
스팬 클래스에서 동적 요소를 클릭하는 방법은 무엇입니까? 셀레늄 WebDriver
- 27
typescript에서 CSS 클래스를 변경하는 방법은 무엇입니까?
- 28
CSS에서 2 개의 인라인 스타일을 기반으로 요소를 선택하는 방법은 무엇입니까?
- 29
css 파일의 td에 기존 클래스를 추가하는 방법은 무엇입니까?
몇 마디 만하겠습니다