角2 /ブートストラップリストグループ選択アイテム

Question

ブートストラップlist-groupがあります。選択したアイテムを切り替えるクラスを使用して、1つのアイテムをより暗い背景で選択したいと考えています。選択後に1つのアイテムを選択する最も良い方法は何ですか？

<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}"> 
... 

私はwidget.selected = trueを設定しますsetSelectedItem()を想定しています。

スタイルシートに選択したクラスを追加する必要があります。

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>