0

Estou tentando aplicar um efeito de row stripped nas linhas de um *ngFor mas aparentemente está sendo aplicado em todas as minhas rows.

Eu tentei algo como:

HTML

<div class="row ml-4" *ngIf="visivel">
  <div class="divJanelaResultadoParcial" id="autocompletar" class="col-xl-9 divJanelaResultadoParcial">
    <a class="divJanelaProduto" *ngFor="let produto of produtos" [routerLink]="['/produtos', produto.id, produto.slug]" >
      <div class="row linhaProduto row-striped">

        <div class="col-3">
          <img class="img" src="{{ produto.foto_prin_1 }}"/>
        </div>

        <div class="col-6">
          <span class="ml-2">{{ produto.nome }}</span>
        </div>

        <div class="col-3">
          <span class="ml-2">{{ produto.preco | currency:'BRL' }}</span>
        </div>

      </div>
    </a>
  </div>
</div>

CSS

  .img {
        width:60px;
        height: 60px;
    }

    .divJanelaResultadoParcial{
        z-index: 20;
    }

    .linhaProduto{
        display: flex;
        align-items: center;
    }


    .row-striped:nth-of-type(odd){
        background-color: #efefef;
      }

      .row-striped:nth-of-type(even){
        background-color: #ffffff;
      }

Meu resultado:

inserir a descrição da imagem aqui

1
  • Acredito que o nth-of-type deva ser aplicado na classe divJanelaProduto, pois é ela que se repete. Na row-striped sempre haverá uma para cada divJanelaProduto, mas há várias divJanelaProduto para cada row ml-4. 3/04/2019 às 17:58

1 Resposta 1

0

Consegui dessa forma:

<div class="row ml-4" *ngIf="visivel">
    <div class="divJanelaResultadoParcial" id="autocompletar" class="col-xl-9 divJanelaResultadoParcial">
      <a class="divJanelaProduto" *ngFor="let produto of produtos; let even = even; let odd = odd" [routerLink]="['/produtos', produto.id, produto.slug]">
        <div class="row linhaProduto row-striped" [ngClass]="{ odd: odd, even: even }">

          <div class="col-3">
            <img class="img" src="{{ produto.foto_prin_1 }}"/>
          </div>

          <div class="col-6">
            <span class="ml-2">{{ produto.nome }}</span>
          </div>

          <div class="col-3">
            <span class="ml-2">{{ produto.preco | currency:'BRL' }}</span>
          </div>

        </div>
      </a>
    </div>
  </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .