Question

有这样一个列表：

<div class="media" *ngFor="p of phonebook">
  <a class="list-group-item" (click)="onSelectedPhone(p.id)">
    <h4 class=" media-heading list-group-item-heading"> {{p.name}} </h4>
     <div class="row">
       <div class="col-md-9">
        <p class="list-group-item-text">{{p.number}}</p>     
       </div>                  
     </div>      
   </a>
</div>

与单击其中一个块时一样，以某种颜色突出显示该块现在处于活动状态。

  onSelectedPhone(phoneId) {
    this.selectedPhone = this.phonebook.find(el => {
      return el.id === phoneId
    });
  }

Answer 1

在要突出显示的项目上：[ngClass]="'list-group-item' + (isSelected ? 'selected' : '')"定义boolean isSelected，并使用CSS类突出显示它。

Answer 2

在div标记上，添加以下内容：

class="{{selectedPhone == p ? 'selectedPhoneClass' : ''}} media"

您也可以将其添加到a标记中，而不是将media换成list-group-item

Answer 3

您可以尝试使用此解决方案

我已经在stackblitz上创建了一个演示

event

如何更改活动块的颜色？

3 个答案: