Question

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

请找到plunker链接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>

Answer 2

您好我在这里修了一个新的plunker - ＆gt;

https://plnkr.co/edit/Cys2iGOQxWGta3KjRL9f?p=preview

关键是将数组映射到选定的属性，并使用基于该视图的视图。

this.quarterDataList.map(quarter =>{
      quarter.selected=false;
      return quarter;
})

并在html上

<div class="item-hover" *ngFor="let count of item.quarterData;let i = index" (click)="count.selected=!count.selected" [class.active]="count.selected">

突出显示angular * ngFor中的选定元素

2 个答案: