Descargo de responsabilidad: soy nuevo en Angular.

Tengo una aplicación Angular muy simple que crea una tabla de elementos, digamos "productos".

Tengo un componente llamado "Productos" y un subcomponente (si esa es la terminología) llamado producto-elemento.

Todo funciona bien excepto por el estilo que quiero.

En el componente "Productos", tengo el siguiente HTML:

 <table> <tbody> <ng-container *ngFor="let product of productList"> <app-product-item [product]="product "></app-product-item> </ng-container> </tbody> </table>

En el producto-artículo tengo:

 <tr> <td>{{product.Num}}</td> <td>{{product.Name}}</td> </tr>

Ahora me gustaría aplicar el siguiente estilo:

 tr:nth-child(odd) {background-color: #d46969;}

Cuando lo hago en el archivo product-item.component.css, todas las filas tienen el estilo, no solo las filas pares. ¿Alguien puede explicar lo que estoy haciendo mal?

Gracias.