Question

如何更改购物车中所选颜色的颜色？

<ion-item  *ngFor="let list of urunListesi; let i = index;" >
    <ion-thumbnail item-start>
       <img class="urunListeGorsel" 
                 [src]="list.DEFAULTRESIM ? 
                    'http://pexsssd.com/assets/urungorsel/'+list.DEFAULTRESIM : 
                    'http://www.djxxxldl.com/assets/image.png'" 
                 (load)="onImageLoad($event)" />
    </ion-thumbnail>
    <h2 class="urunListeYazi1" 
        (tap)="urunDetay(list.ID, 
                         list.STOKNO,  
                         list.BIRIM, 
                         list.STOKADI,  
                         list.FIYAT, 
                         list.DEFAULTRESIM,  
                         list.BARKOD, 
                         list.ONCEKIFIYAT)">

         <img [hidden]="!list.KAMPANYAID" class="indirimEtiketi" 
              src="assets/indirim52.png">
               {{ list.STOKADI }}
    </h2>
    <p class="urunListeYazi"> 
       <span (tap)="urunDetay(list.ID, 
                              list.STOKNO, 
                              list.BIRIM, 
                              list.STOKADI, 
                              list.FIYAT, 
                              list.DEFAULTRESIM, 
                              list.BARKOD, 
                              list.ONCEKIFIYAT)" 
              class="fiyat" 
              [style.font-weight]="'bold'" 
              [style.color]="list.KAMPANYAID > 0 ? 'green' : 'black'">
                    {{ urunFiyatKisalt(list.FIYAT) }} ₺
        </span>
           &nbsp; 
        <del (tap)="urunDetay(list.ID, 
                              list.STOKNO, 
                              list.BIRIM, 
                              list.STOKADI, 
                              list.FIYAT, 
                              list.DEFAULTRESIM, 
                              list.BARKOD, list.ONCEKIFIYAT)" 
              [style.font-weight]="'bold'" 
              [hidden]="!list.KAMPANYAID">
            {{ urunFiyatKisalt(list.ONCEKIFIYAT) }}&nbsp;
        </del>
        <span [style.font-weigth]="'bold'" [hidden]="!list.KAMPANYAID">₺</span>
        <ion-icon (tap)="sepetEkle(i, list.STOKNO)" 
                  [class.sepeteEklenmis]="sepetEkleDeger" 
                  class="urunListesiSepeteEkle" 
                  ios="ios-cart" 
                  md="md-cart">
        </ion-icon>
    </p>
    <h3 [hidden]="!list.KAMPANYAID"  
        class="kampanyaliUrunlerBitisTarihi"> 
              <ion-icon name="ios-alarm-outline"></ion-icon> 
      {{ ngOnInit(list.BITISTARIHI)}}
     </h3> 

  </ion-item>

Answer 1

选择后需要添加一个类，取消选择后删除该类。那么你可以只将css应用于选定的项目。

之类的东西

.selected{background-color:pink;}

Answer 2

<强> Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private names = [
    { name: 'John', selected:false},
    { name : 'Paul', selected:false},
    { name : 'Ringo', selected:false},
    { name: 'George', selected:false}
  ];

  constructor(public navCtrl: NavController) {

  }
  select(selectedName):void {
    this.names.forEach((n) => {
      if (n.name === selectedName.name) {
        n.selected = !n.selected;
      }
    });
  }

  getBgColor(name):string {
    return (name.selected) ? 'yellow' : '';
  }
}

<强> Home.html中

<ion-list>
  <ion-item *ngFor="let name of names" 
           [style.background-color]="getBgColor(name)"
            (click)="select(name)">
    {{name.name}}
  </ion-item>
</ion-list>

更改列表中所选区域的颜色？

2 个答案: