Angular+ionic4分類菜單添加不同樣式

一，給周遊過來的分類菜單添加不同樣式

html中

<section class="shop-item-types">
    <ion-grid >
      <ion-row>
          <ion-col class="item-list" size="3" *ngFor="let item of cellimgs">
              <div class="shop-item-card" >
                  <li class="cell-img"><img [src]="item.pictureUrl"></li>
                  <span class="cell-text">{{item.name}}</span>
              </div>
          </ion-col>
        </ion-row>
   </ion-grid>
  </section>
           

方法一：css中

.shop-item-types{
    width: 100%;
    height: rem(299);
    .item-list{
      &:nth-child(1){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(360deg,rgba(232,49,78,0.92) 0%,rgba(255,113,113,0.8) 100%);
          }
        }
      }
      &:nth-child(2){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(180deg,rgba(175,173,230,1) 0%,rgba(106,106,158,1) 100%);
          }
        }
      }
      &:nth-child(3){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(180deg,rgba(118,220,174,1) 0%,rgba(66,159,188,1) 100%);
          }
        }
       
      }
      &:nth-child(4){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(360deg,rgba(255,88,88,1) 0%,rgba(240,152,25,0.9) 100%);
          }
        }
       
      }
      &:nth-child(5){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(360deg,rgba(232,49,78,0.92) 0%,rgba(255,113,113,0.8) 100%);
          }
        }
        
      }
      &:nth-child(6){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(180deg,rgba(175,173,230,1) 0%,rgba(106,106,158,1) 100%);
          }
        }
      
      }
      &:nth-child(7){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(180deg,rgba(118,220,174,1) 0%,rgba(66,159,188,1) 100%);
          }
        }
      
      }
      &:nth-child(8){
        .shop-item-card{
          .cell-img{
            background:linear-gradient(360deg,rgba(255,88,88,1) 0%,rgba(240,152,25,0.9) 100%);
          }
        }
      
      }
    }
           

方法二：周遊樣式數組展示。

ts中

public cellimgs=[];
 public bgcolor = ['red', 'green', 'blue', 'orange', 'pink', 'purle', 'red', 'green'];
//cellimgs後端接入數組
//bgcolor樣式數組
this.cellimgs.forEach((item,index) => {
              item['bg'] = this.bgcolor[index]//給接入數組添加字段
            });
            
           

html中，添加：[ngStyle]="{‘background-color’:item.bg}"

<section class="shop-item-types">
    <ion-grid >
      <ion-row>
          <ion-col class="item-list" size="3" *ngFor="let item of cellimgs">
              <div class="shop-item-card" >
                  <li class="cell-img" [ngStyle]="{'background-color':item.bg}"><img [src]="item.pictureUrl"></li>
                  <span class="cell-text">{{item.name}}</span>
              </div>
          </ion-col>
        </ion-row>
   </ion-grid>
  </section>