Employing Ionic 2 with Typescript.
I am seeking a way to empower users to choose the background color for each item in my list.
ISSUE: How can I retrieve the reference to the i-th element? Whenever I select an item, it only changes the background of the first element in the list.
Left Image: ERROR - Right Image: DESIRED OUTCOME https://i.sstatic.net/girkz.jpg
Let's delve into the code:
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'
})
...
In essence, my current code always points to the initial element in the list.
PS: I ask for forgiveness in case of any grammatical errors in my English.