更改ListView中当前选定项目的背景颜色时出现问题-Nativescript/Angular2 [英] Issues changing the background colour of the currently selected item in a ListView - Nativescript/Angular2
问题描述
我正忙于Nativescript/Angular2应用程序,在该应用程序中,我在ListView中显示有效库存清单.我正在尝试更改ListView中当前选定的库存盘点项目的背景颜色,以显示当前选定的StockTake.我将css类添加到ng-template内的StackLayout中,但是由于某些原因,当我点击某个项目时未应用css.知道这里可能出什么问题/如何解决这个问题吗?我没有任何错误,所以我完全不知道这里可能是什么问题...
I am busy with a Nativescript/Angular2 app where I display a list of active stock takes in a ListView. I am trying to change the background color lf the current selected stock take item in the ListView to show the currently selected StockTake. I add the css class to the StackLayout inside the ng-template but for some reason the css isn't applied when I tap on a item. Any idea what could be going wrong here/how I can fix this? I don't get any errors so i'm completely lost as to what the issue might be here...
my ListView xml code:
<ListView [items]="activeStockTakes" class="list-group">
<ng-template let-activeStockTake="item" let-i="index">
<StackLayout [class.highlight]="item.isSelected" (tap)="selectActiveStockTake(item, index)">
<Label class="list-group-item" [text]="activeStockTake.UserCode + ' - ' + activeStockTake.Comment"></Label>
</StackLayout>
</ng-template>
</ListView>
my css code:
.highlight {
background-color: red !important;
border-radius: 3;
}
my selectActiveStockTake event:
selectActiveStockTake(item, index) {
//console.log(args.index);
this.selectedActiveStockTake = this.activeStockTakes[index];
this.selectedActiveStockTake.isSelected = true;
console.log(this.selectedActiveStockTake.UserCode);
}
推荐答案
尝试
<ListView [items]="activeStockTakes" class="list-group">
<ng-template let-activeStockTake="item" let-i="index">
<StackLayout [class.highlight]="item.isSelected" (tap)="selectActiveStockTake(item, i)">
<Label class="list-group-item" [text]="activeStockTake.UserCode + ' - ' + activeStockTake.Comment"></Label>
</StackLayout>
</ng-template>
</ListView>
然后:
selectActiveStockTake(item, i) {
item.isSelected = !item.isSelected;
}
这是一个更干净的解决方案,应该可以正常工作.
This is a much cleaner solution and should work perfectly.
这篇关于更改ListView中当前选定项目的背景颜色时出现问题-Nativescript/Angular2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!