javascript - 突出显示 Angular * ngFor中的选定元素

Question

我试图通过在我的 Angular 2 应用程序中应用边框类来突出显示并保持所选元素处于事件状态。但是在选择任何年份下的子元素时，会选择其他年份的所有相应子组件。我只想突出显示所选元素。

请找到插件链接 here

用于突出显示所选元素的代码:

this.setClickedRow = function(index){
         console.log(index);
            this.selectedRow = index;
        }

注意:在悬停时，我正在应用类 item-hover，它适用于单个子元素。

如果有人以前遇到过类似的问题，请告诉我..

Answer 1

将您的模板更改为:

<div class="border-box">
    <div  *ngFor="let item of quarterDataList">
      <h2>{{item.year}}</h2>
      <div class="item-hover" *ngFor="let count of item.quarterData;let i = index" (click)="setClickedRow((i+'_'+item.year))" [class.active]="((i+'_'+item.year)) == selectedRow">
        <br>
       {{count.view}}-{{count.count}}
    </div>
    </div>

  </div>