html - 为列表的任何特定元素设置背景

Question

将 Ionic 2 与 Typescript 结合使用。

我想让用户为列表中的每个元素选择背景颜色。

问题:如何获取对第 i 个元素的引用？选择任何元素只会更改列表中第一个元素的背景。

左 图片:错误 - 右 图片:预期行为

现在是一些代码:

NOTE.HTML

<ion-content class='lista'>
    <ion-list reorder="true" (ionItemReorder)="reorderItems($event)">
        <ion-item-sliding *ngFor="let alimento of listaSpesa">       
            <ion-item text-wrap class="popover-page" #popoverList> // FOR BACKGROUND
                <ion-grid>
                    <ion-row center>
                        <ion-col width-10 (click)="setPopOver($event, alimento)">
                            <ion-buttons>
                                <button dark clear disabled full>
                                    <ion-icon name="more"></ion-icon>
                                </button>
                            </ion-buttons>
                        </ion-col> 
                        <ion-col width-10>
                            <img src="{{alimento.userImg}}" class="imgAlimenti" />
                        </ion-col>
                        <ion-col width-80>
                            <ion-row>{{alimento.id}} - {{alimento.id_lista}} </ion-row>
                            <ion-row><p>{{alimento.descrizione}} - </p></ion-row>
                        </ion-col>
                    </ion-row>
                </ion-grid>    
            </ion-item>               
        </ion-item-sliding>
    </ion-list>
</ion-content>

.CSS

.popover-page {    
    ion-row,
    ion-col {
        padding: 0;
    }    
    .row-dots {
        text-align: center;

        .dot {
            height: 3rem;
            width: 3rem;
            border-radius: 50%;
            margin: 10px auto;
            position: relative;
            border: 1px solid white;
        }
    }

    .dot-white { background-color: rgb(255,255,255); }
    .dot-tan { background-color: rgb(249,241,228); }
    .dot-grey { background-color: rgb(76,75,80); }
    .dot-black { background-color: rgb(0,0,0); }
    .dot.selected {
        border-width: 2px;
        border-color: #327eff;
    }
}

.TS

@Component({
  templateUrl: './build/pages/notes/notes.html'
})
export class NotesPage {
@ViewChild('popoverList', {read: ElementRef}) content: ElementRef; // FOR REFERENCE
constructor(private popoverCtrl: PopoverController){}

      setPopOver(myEvent, alimento: Alimento) { // POPOVER
            console.log('--> PopoverEditAlimento: ENTERED');
            let index = this.listaSpesa.indexOf(alimento);
            if (index > -1) {
                let popover = this.popoverCtrl.create(PopoverDetailsPicker, {contentEle: this.content.nativeElement});
                popover.onDidDismiss(val => {
                    if (val != null) {
                        console.log('SCELTA FUNZIONE:', val); // SOME STUFF
                    }
                    console.log('--> PopoverEditAlimento: CLOSED');
                });
                popover.present({
                   ev: myEvent
                });
            } else {
                console.log('PopoverEditAlimento: ERROR');
            }
      }
}

@Component({ // POPOVER DEFINITION
    template: `
    <ion-list radio-group class="popover-page">
        <ion-row class="row-dots">
            <ion-col>
                <button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
            </ion-col>
            <ion-col>
                <button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
            </ion-col>
            <ion-col>
                <button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
            </ion-col>
            <ion-col>
                <button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
            </ion-col>
        </ion-row>
        <button ion-item (click)="switch(0)">
            <ion-icon name="copy"></ion-icon>
            &nbsp; Cambia Titolo
        </button>
        <button ion-item (click)="switch(1)">
            <ion-icon name="clipboard"></ion-icon>
            &nbsp; Cambia Descrizione
        </button>
        <button ion-item (click)="switch(2)">
            <ion-icon name="mic"></ion-icon>
            &nbsp; Detta nuovo titolo
        </button>
    </ion-list>
    `
})
class PopoverDetailsPicker {

  background: string;
  contentEle: any;
  colors = {
    'white': {
      'bg': 'rgb(255, 255, 255)'
    },
    'tan': {
      'bg': 'rgb(249, 241, 228)'
    },
    'grey': {
      'bg': 'rgb(76, 75, 80)'
    },
    'black': {
      'bg': 'rgb(0, 0, 0)'
    },
  };

constructor(private viewCtrl: ViewController, private navParams: NavParams) {}

    ngOnInit() {
        if (this.navParams.data) {
            this.contentEle = this.navParams.data.contentEle;
            this.background = this.getColorName(this.contentEle.style.backgroundColor);
        }
    }

    getColorName(background) {
        let colorName = 'white';
        if (!background) return 'white';

        for (var key in this.colors) {
            if (this.colors[key].bg === background) {
                colorName = key;
            }
        }
        return colorName;
    }

    changeBackground(color) {
        this.background = color;
        this.contentEle.style.backgroundColor = this.colors[color].bg;
    }

    switch(scelta: number) {
        if (scelta) { 
            this.viewCtrl.dismiss(scelta); // ritorno la funzione scelta dall'utente
        }
    }
}

简单来说，我的代码总是只引用第一个元素。

PS:我为我糟糕的英语提前道歉。

Answer 1

已解决(与开始有点不同):

.HTML 将其添加到您的容器中。

<ion-item text-wrap [ngStyle]="{'background-color': alimento.colore}" class="popover-page" #popoverList>
</ion-item>  

.TS

@Component({
  templateUrl: './build/pages/notes/notes.html',
})
export class NotesPage {

  constructor(private popoverCtrl: PopoverController) {}

    setPopOver(myEvent, alimento: Alimento) {
        let index = this.listaSpesa.indexOf(alimento);
        if (index > -1) {
            let popover = this.popoverCtrl.create(PopoverDetailsPicker, {coloreBG: this.listaSpesa[index].colore});
            popover.onDidDismiss(val => {
                if (val !== null) {
                    switch (val) {
                        case 'white':
                            this.listaSpesa[index].colore = '#ffffff';
                            break;
                        case 'lightBlue':
                             this.listaSpesa[index].colore = '#ccf5ff';
                            break;
                        case 'lightRed':
                            this.listaSpesa[index].colore = '#ffd1b3';
                            break;
                        case 'lightGreen':
                            this.listaSpesa[index].colore = '#ccffcc';
                            break;
                        case 'lightYellow':
                            this.listaSpesa[index].colore = '#ffffb3'; 
                            break;                                                        
                        default:
                            Toast.show('Scelta non corretta.', '1000', 'center').subscribe(toast => {});  
                    }
                }
            });
            popover.present({
               ev: myEvent
            });
        }
  }
}

@Component({  // POPOVER DEFINITION
    template: `
    <ion-list radio-group class="popover-page">
        <ion-row class="row-dots">
            <ion-col>
                <button (click)="switch('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
            </ion-col>
            <ion-col>
                <button (click)="switch('lightBlue')" category="dot" class="dot-lightBlue" [class.selected]="background == 'lightBlue'"></button>
            </ion-col>
            <ion-col>
                <button (click)="switch('lightRed')" category="dot" class="dot-lightRed" [class.selected]="background == 'lightRed'"></button>
            </ion-col>
            <ion-col>
                <button (click)="switch('lightGreen')" category="dot" class="dot-lightGreen" [class.selected]="background == 'lightGreen'"></button>
            </ion-col>
            <ion-col>
                <button (click)="switch('lightYellow')" category="dot" class="dot-lightYellow" [class.selected]="background == 'lightYellow'"></button>
            </ion-col>
        </ion-row>    
    </ion-list>
    `
})
class PopoverDetailsPicker {

  background: string;
  contentEle: any;
  colors = {
    'white': {
      'bg': '#ffffff'
    },
    'lightBlue': {
      'bg': '#ccf5ff'
    },
    'lightRed': {
      'bg': '#ffd1b3'
    },
    'lightGreen': {
      'bg': '#ccffcc'
    },
    'lightYellow': {
      'bg': '#ffffb3'
    },
  };

constructor(private viewCtrl: ViewController, private navParams: NavParams) {}

    ngOnInit() {
        if (this.navParams.data) {
            this.contentEle = this.navParams.data.coloreBG;
            this.background = this.getColorName(this.contentEle);
        }
    }

    getColorName(background) {
        let colorName = 'white';
        if (!background) return 'white';

        for (var key in this.colors) {
            if (this.colors[key].bg === background) {
                colorName = key;
            }
        }
        return colorName;
    }

    switch(scelta: any) {
        if (scelta !== null) { 
            this.viewCtrl.dismiss(scelta); // ritorno la funzione scelta dall'utente
        }
    }
}

给你: