行條紋不適用於角* ngFor

Question

我正在嘗試在具有* nfFor的行中應用剝離的效果行，但是顯然該類在所有行中都應用了灰色背景。

我嘗試類似的東西：

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;
      }

結果如下：

Answer 1

* ngFor不是識別項目，而是進行循環。

如果您希望產生條紋效果，請嘗試以下操作：

HTML：

<li *ngFor="let item of [1,2,3,4,5,6]; let odd = odd">
    <p [class.odd]="odd">item</p>
</li>

CSS：

.odd{
  background:grey
}

演示

Answer 2

您可以使用ngFor中的偶數和奇數功能。

*ngFor="let produto of produtos; let even = even; let odd = odd"

---

<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>

.row-striped.even {
  background-color: #ffffff;
}

.row-striped.odd {
  background-color: #efefef;
}