홈>
홀수 및 짝수 행에 다른 배경색을 부여하려는 표가 있습니다. 일반적으로
odd
를 사용할 수 있습니다
그리고
even
이것에 대한 변수. 그러나 지금은
ng-container
안에 테이블 행을 만들고 있습니다.
따라서 반복마다 하나 이상의 행을 조건부로 만들 수 있습니다. 이 경우 모든 반복은 변수에 따라 1 개 또는 2 개의 행을 만듭니다.
<ng-container *ngFor="let detailof data.details; let odd = odd;">
<tr [ngClass]="{ 'k-alt': odd}">
<td>
{{ detail.number1 }}
</td>
<td>
{{ detail.number2 }}
</td>
<td>
{{ detail.number3 }}
</td>
</tr>
<tr *ngIf="detail.conditionalVariable" [ngClass]="{ 'k-alt': odd}">
<td></td>
<td>{{ detail.conditionalVariable }}</td>
<td></td>
</tr>
</ng-container>
보시다시피, 홀수 변수가
*ngFor
에 선언되어 있기 때문에 반복 할 때마다 모든 행 자체가 아니라 다른 배경으로 행이 표시됩니다.
ng-container
에서
요소.
ng-container
를 사용할 때 각 행에 다른 배경색을 부여하는 방법이 있습니까
조건부 행이 있습니까?
-
답변 # 1
-
답변 # 2
인덱스 속성을 사용할 수 있습니다 :
<ng-container *ngFor="let detailof data.details; let index = index" [ngClass]="{'myStyle': 0 === index % 2}">...</ng-container>
ngForOF 공식 문서
-
답변 # 3
이 방법으로도 사용할 수 있습니다 :
<ng-container *ngFor="let detail of data.details; let odd = odd"> <tr [class.oddBackground]=" odd "> <td> {{ detail.number1 }} </td> <td> {{ detail.number2 }} </td> <td> {{ detail.number3 }} </td> </tr> <tr *ngIf="detail.conditionalVariable" [ngClass]="{ 'k-alt': odd}"> <td></td> <td>{{ detail.conditionalVariable }}</td> <td></td> </tr> </ng-container>
행이 홀수 인 경우에만 oddBackground 클래스를 추가하여 홀수 변수가 true임을 의미합니다.
관련 자료
- html - 인라인 텍스트를 중앙에 배치 할 수 없습니다 색상이 다른 한 단어 만 있으면됩니다하지만 모든 인라인 텍스트를 중앙에 배치하지는 않습니다
- python 3.x - 다른 색상의 선 플롯 마커 만들기
- python - 각 장고 모델 선택에 대해 다른 색상을 어떻게 지정합니까?
- python - plotly - 각 변수에 대해 다른 스타일과 색상으로 선 플롯을 만드는 방법은 무엇입니까?
- ls - zsh - tar 파일을 흰색과 다른 색상으로 표시하도록 ls_color를 설정하는 방법은 무엇입니까?
- html - 하나의 CSS 파일에서 다른 색상 테마를 사용하는 방법
- html - 테두리가 가득 차 있지만 각 항목마다 다른 색상
- MATLAB Figure의 일부 샘플을 다른 색으로 색칠하기
- html - PHP 함수를 사용하여 생성 된 각 에 다른 bg 색상을 부여하는 방법은 무엇입니까?
- python - 강조 표시된 항목에 대한 QListWidget 항목 다른 색상
- javascript - 발행 날짜와 만료 날짜를 비교하여 카드에 다른 색상 표시 Angular 7
- visual studio code - 편집기 배경 이외의 설정 창에 다른 배경색을 설정하는 방법
- r - 다른 색상 채널의 플롯을 ggplot2와 병합하는 방법
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- vue.js - axios를 사용하여 서버에 이미지를 업로드하는 방법
- python - 문자열에서 특정 문자 제거
왜 CSS를 사용하지 않습니까? 예를 들어,
k-alt
를 설정하십시오. 모든 행과 CSS의 클래스 :