如何使用* 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; 
    } 
}