Angular2/Nativescript: 如何高亮ListView的选中项？

Question

我通读了 Nativescript ListView 文档并进行了搜索 Google，但找不到任何方法来突出显示 Listview 中当前选定的项目...这甚至可能吗？如果可以，我该怎么办？

我的代码：

<ListView [items]="activeStockTakes" class="list-group" (itemTap)="selectActiveStockTake($event)">
                    <template let-activeStockTake="item">
                        <StackLayout>
                            <Label class="list-group-item" [text]="activeStockTake.UserCode + ' - ' + activeStockTake.Comment"></Label>
                        </StackLayout>
                    </template>
                </ListView>

Answer 1

当然可以！

在CSS中定义一个class"highlight":

.highlight {
  background-color: #eee;
}

然后根据视图中的条件赋值：

<StackLayout [class.highlight]="selectedItem && activeStockTake.UserCode === selectedItem.UserCode">

selectedItem 属性在您的组件中定义，并且 assigned/updated 当在列表中选择一个项目时。

Answer 2

我遇到了同样的问题，Eddy 的回答帮我解决了。

2 css classes：选中和未选中。

在模板中加入let-i="index"获取listview元素索引

设置默认值 class 为 class="Unselected"

使用数据绑定有条件地更改所选列表视图项的 class [class.Selected]="i===selectedIndex"

使用(tap)="selectMenu(i)"

将所选元素的索引馈送到组件

在您的组件中，创建变量 selectedIndex 并将其设置为等于所选元素的索引。

点击一个元素现在会改变它的 CSS class。如果您选择了一个元素并点击列表中的另一个元素，则新元素将变为选中状态，而第一个选择将变为未选中状态。

CSS

    <ListView [items]="submenu">
        <template let-item="item" let-i="index">
            <Label [class.Selected]="i===selectedIndex" [text]="item" class="Unselected" (tap)="selectMenu(i)"></Label>
        </template>
    </ListView>

TS

selectedIndex: number;

selectMenu(i) {
    this.selectedIndex=i;
}

Angular2/Nativescript: 如何高亮ListView的选中项？

Angular2/Nativescript: How to Highlight the selected item of a ListView?

css

nativescript

angular2-nativescript