更改ListView中当前所选项目的背景颜色的问题 - Nativescript / Angular2

Question

我正忙着使用Nativescript / Angular2应用程序，我在ListView中显示活动库存列表。我正在尝试更改ListView中当前所选库存采购项目的背景颜色，以显示当前选定的StockTake。我将css类添加到ng-template内的StackLayout，但由于某种原因，当我点击一个项目时，不会应用css。知道这里可能出现什么问题/如何解决这个问题？我没有收到任何错误，所以我完全不知道这里可能出现的问题...

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

Answer 1

尝试

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

这是一个更清洁的解决方案，应该可以完美运行。