在单击角度 ngFor 时保留背景边框答案

【问题标题】：Retain background border on click angular ngFor在单击角度 ngFor 时保留背景边框
【发布时间】：2017-10-26 15:04:38
【问题描述】：

我正在尝试保留在面板的每一行上单击的蓝色背景边框，该面板连续显示每年的数据。目前，无论面板是否以多视图打开，我都只能悬停在一行上。

我试图改变这个设置蓝色边框的条件

 [class.active]="((i+'_'+yearData.year)) == selectedMonthIndex"

到

 [class.active]="((i+'_'+yearData.year)) == selectedMonthIndex{{i}}" but not working.

请找到plunker链接here

【问题讨论】：

在面板打开时使用额外的“活动”类并应用 css 边框属性
[class.active]="((i+'_'+yearData.year)) == selectedMonthIndex[i]" 试过这样吗？
@ÁlvaroTouzón 试过但没用 :-(
@priya_singh 你能在 plunker 中更新吗..

标签： javascript css angular

【解决方案1】：

我已经更新了答案。你可以检查

Link to answer

您必须更改模板中活动类的条件

<div class="col-md-1 month-hover" *ngFor="let monthData of yearData.cardData; let i = index" (click)="setClickedMonth((i+'_'+yearData.year),i1,monthData.view);" [class.active]="(((monthData.view)) == yearData.selected) && isActive[i1]">
  <ul class="col-md-12" style="list-style-type: none;line-height: 25px;">
     <li class="category-title ">
        {{monthData.view}}
      </li>
      <li class="category-value ">
         {{monthData.count}}
       </li>
     </ul>
  </div>

【讨论】：

似乎没有按预期工作。请检查一下。
哦，我的错。我只检查了一种情况。
我已经改过了。您现在可以查看