Issues changing the background colour of the currently selected item in a ListView - Nativescript/Angular2

喜你入骨 提交于 2019-12-13 11:09:07

问题


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

回答1:


Try

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

and then:

selectActiveStockTake(item, i) {
  item.isSelected = !item.isSelected;
}

This is a much cleaner solution and should work perfectly.



来源:https://stackoverflow.com/questions/43538609/issues-changing-the-background-colour-of-the-currently-selected-item-in-a-listvi

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!