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>

Angular 2 / Bootstrap list-group选择项

2 个答案: