如何使用* ngFor與ionic2添加第n個孩子班，angular2

Question

我正在使用ionic2。我有一個數組product。我使用網格視圖顯示產品。

<ion-row *ngFor="let i of rows" #myElem> 
     <ion-col class="productlist" col-6 *ngFor="let p of product | slice:(i*2):(i+1)*2" (click)="nav(p.details.id)" > 
      <div class="product-image"> 
       <img src="{{p.details.P_IMAGES[0].URL}}" alt="Product 1"> 
      </div> 

      <div class="product-blk"> 
       <div class="product-title">{{p.details.P_TITLE}}</div> 
       <div class="product-price"> 
        <img src="./assets/images/rupee-yellow.svg" alt="Rupee">{{p.details.PRICE_SALE}} 
        <span>{{p.details.PRICE_REGULAR}}</span> 
       </div> 
       <div class="product-desc"> 
        {{p.Desc}} 
       </div> 
      </div> 
     </ion-col> 
    </ion-row> 

這裏是我的CSS：

.productlist { 
     animation: FadeIn 1s linear; 
     animation-fill-mode: both; 
     animation-delay: .5s 
    } 

@keyframes FadeIn { 
    0% { 
    opacity: 0; 
    transform: scale(.1); 
    } 

    85% { 
    opacity: 1; 
    transform: scale(1.05); 
    } 
    100% { 
    transform: scale(1); 
    } 
} 

它完美，但我需要設置每個網格動畫延遲;我需要像這樣的自定義CSS類：

.productlist:nth-child(1),.productlist:nth-child(2),.. 

我該怎麼做？

Answer 1

這是CSS，你將需要：

.productlist:nth-child(1) { 
    animation-delay: 1s; 
} 

.productlist:nth-child(2) { 
    animation-delay: 2s; 
} 

.productlist:nth-child(3) { 
    animation-delay: 3s; 
} 

.productlist:nth-child(4) { 
    animation-delay: 4s; 
} 

你可以寫一個for循環中的一個CSS預處理器像薩斯，爲簡潔：

@for $i from 1 through 4 { 
    .productlist:nth-child(#{$i}){ 
     animation-delay: $i + s; 
    } 
}