为列表的任何特定元素设置背景
Posted
技术标签:
【中文标题】为列表的任何特定元素设置背景【英文标题】：Set background for any specific element of a list 【发布时间】：2017-01-02 22:50:06 【问题描述】：将 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>
Cambia Titolo
</button>
<button ion-item (click)="switch(1)">
<ion-icon name="clipboard"></ion-icon>
Cambia Descrizione
</button>
<button ion-item (click)="switch(2)">
<ion-icon name="mic"></ion-icon>
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：我为我的英语不好提前道歉。
【问题讨论】：
使用myEvent.target 属性怎么样？也许使用该属性，您可以获取创建事件的元素
也许，但不知道有多真诚...有什么建议吗？
【参考方案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
然后给你：
【讨论】：
以上是关于为列表的任何特定元素设置背景的主要内容，如果未能解决你的问题，请参考以下文章