>

홀수 및 짝수 행에 다른 배경색을 부여하려는 표가 있습니다. 일반적으로 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

    왜 CSS를 사용하지 않습니까? 예를 들어, k-alt 를 설정하십시오.  모든 행과 CSS의 클래스 :

    tr.k-alt:nth-child(odd) {
        background: #CCC;
    }
    
    

  • 답변 # 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임을 의미합니다.

  • 이전 android - 개발 중 룸 데이터베이스 버전 번호 유지
  • 다음 sql - 전자 메일 주소 양식 배포 목록 열을 제거하기위한 업데이트 요청