リストの特定の要素の背景を設定する

Question

TypicriptでIonic 2を使用する。

私は自分のリストの各要素の背景色を選択できるようにします。

問題：i番目の要素への参照を取得するにはどうすればよいですか？ 項目を選択すると、リスト内の最初の要素の背景のみが変更されます。

左画像：ERROR - 右画像：今、期待される動作

いくつかのコード：

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

そして、ここに行く：