Angular 2/Bootstrap list-group select item

Question

我有引导程序list-group，我想通过一个类来选择一个具有较暗背景的项目，该类将切换为所选项目。在选择之后选择一个项目的最佳方式是什么？

<div class="list-group"> 
    <div class="media" *ngFor="let group of _groups"> 
    <div class="group-title">{{group.groupTitle}}</div> 
    <div (click)="setSelectedItem($event, widget)" class="list-group-item" *ngFor="let widget of group.widgets"> 
     {{widget.title}} 
    </div> 
    </div> 
</div> 

Answer 1

使用ngClass例如， [ngClass]="{'selected':widget.selected}"

<div (click)="setSelectedItem($event, widget)" class="list-group-item" *ngFor="let widget of group.widgets" [ngClass]="{'selected':widget.selected}"> 
... 

我假设setSelectedItem()将设置widget.selected = true。

您需要将一个选定的类添加到样式表中。

Answer 2

这解决了它对我来说。

<div class="list-group"> 
    <div class="media" *ngFor="let group of _groups"> 
    <div class="group-title">{{group.groupTitle}}</div> 
    <div (click)="setSelectedItem(widget)" 
     [ngClass]="[(_selectedWidget == widget) ? 'selected' : '']" 
     class="list-group-item" *ngFor="let widget of group.widgets"> 
     {{widget.title}} 
    </div> 
    </div> 
</div>