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

如何更改从购物车中选择的颜色？更改列表中选定区域的颜色？

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

来源

2017-08-28 Can Kurucu

好你的代码是很烦人的阅读，一半是因为它在不同的语言。你可以做的是保留已经选择的项目列表，并创建一个函数来检查项目是否在列表中。然后你可以添加''并添加css：'.selected .item-inner {background-color：light-绿色; }' – Ivaro18

“一半，因为它是在不同的语言”..大声笑 – 2017-08-29 10:22:26

你应该考虑只是将'list'传递给组件中的方法并过滤你需要的内容，而不是在视图中传递每个属性。 – 2017-08-29 10:31:07

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>

来源

2017-08-28 18:06:01 JGFMK

你需要选择的时候加个班，然后再取消时删除类。那么你可以应用一个CSS来选择项目。像

.selected{background-color:pink;}

来源

2017-08-28 16:49:41

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

回答

相关问题