angular2에서 ngFor와 함께 CSS의 n 번째 자식 사용

Question

난 angular2에서 ngFor를 사용하여 동적으로 생성 된 테이블을 가지고 있으며 홀수 행과 다르게 행에 색상을 지정하려고합니다.

<div *ngIf="AreThereMyOldMessages"> 
     <div *ngFor="let oldm of MyOldMessages;let i of MyOldMessages.length"> 
     <tr> 
      <td>{{i}}<br> 
      {{oldm.text}} 
      </td> 
     </tr> 
     </div> 
    </div> 
    <div *ngIf="AreThereMyNewMessages"> 
     <div *ngFor="let message of MyNewMessages;let i of MyNewMessages.length"> 
     <tr> 
      <td>{{i}}<br> 
      {{message.text}} 
      </td> 
     </tr> 
     </div> 
    </div> 
    </table> 

나는하지만이 코드 인쇄를 교대로 같은 색깔의 모든 행을 각 행 색상을합니다. 그에 따라 각 행에 색상을 지정하는 CSS 파일을 설정했습니다.

table tr:nth-child(odd) td 

이 코드를 사용하십시오.

Answer 1

tr:nth-child(odd)가 홀수 자녀 테이블 행 요소와 일치합니다. 귀하의 마크 업에서 각 tr은 실제로 부모 div의 홀수 아드 (첫 번째)입니다.

마크 업을 변경하거나 CSS 스타일을 상위 div에 적용해야합니다.

<table> 
    <tbody> 
    <ng-container *ngIf="AreThereMyOldMessages"> 
     <tr *ngFor="let oldm of MyOldMessages;let i of MyOldMessages.length"> 
     </tr> 
    </ng-container> 
    <ng-container *ngIf="AreThereMyNewMessages"> 
     <tr *ngFor="let message of MyNewMessages;let i of MyNewMessages.length"> 
     </tr> 
    </ng-container> 
    </tbody> 
</table> 

Answer 2

은 다음과 CSS를보십시오 :

table tr:nth-child(even){ 
      background-color:red; 
      } 

table tr:nth-child(odd){ 
      background-color:black; 
      }