홈>2020-02-01 00:41

angular - ngfor - 루프가 컨테이너에있을 때 홀수/짝수 행에 대해 다른 색상

홀수 및 짝수 행에 다른 배경색을 부여하려는 표가 있습니다. 일반적으로 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 를 사용할 때 각 행에 다른 배경색을 부여하는 방법이 있습니까 조건부 행이 있습니까?

angular

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

Python2.net

angular - ngfor - 루프가 컨테이너에있을 때 홀수/짝수 행에 대해 다른 색상

관련 자료