如何在具有多个重复的div上触发唯一事件？ （Angular 2）

Question

所以我在ngFor循环中创建了几个div。如果我单击其中一个div，我想只将一个类添加到已单击的div中。

目前我只是在[ngClass]上使用布尔标志来呈现测试用例，但我不确定如何修改这样的内容，以便生成的每个div都可以有一个唯一的标志。 / p>

这是一个展示的插图;

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

我努力想出一个解决方案，我想避免使用elementRef来定位DOM，但我不确定它是否可能？

（我从未实际使用此功能，因为角度文档标志着安全风险，因此如果我必须使用此任何关于如何完成它的建议将非常感激！）

代码如下 - 希望我已经解释得很清楚，如果您需要更多信息，请告诉我。

TS

@Component({
  selector: 'my-app',
  template: `
    <div class="testCase" 
    *ngFor="let data of data" 
    (click)="onSelect()"
    [ngClass]="{'selected': selected}">
    </div>
  `,
})
export class App {
  selected: boolean = false;

  data:[];

  onSelect(){
    this.selected = !this.selected
  }

  constructor() {
    this.data = ['test1', 'test2']
  }
}

CSS

.testCase {
  float: left;
  height: 50px;
  width: 50px;
  opacity: 0.4;
}

.testCase:first-child {
  background-color: rebeccapurple;
}

.testCase:last-child {
  background-color: steelblue;
}

.testCase:hover {
  opacity: 1;
}

.selected {
  opacity: 1;
}

Answer 1

您可以跟踪数组的index，也可以使用值本身。最后一件事只有你有独特的价值才有效，所以让我们坚持使用索引：

plunkr

@Component({
  selector: 'my-app',
  template: `
    <div class="testCase" 
    *ngFor="let data of data; let i = index;"  
    (click)="onSelect(i)" 
    [class.selected]="selectedIndex === i">  
    </div>
  `,
})
export class App {
  selectedIndex: number;

  data:[];

  onSelect(index:number){
    this.selectedIndex = index;
  }

  constructor() {
    this.data = ['test1', 'test2']
  }
}

如果特定情况为[class.selected]，您会发现只能使用true添加该特定类。另一方面，您看到可以使用*ngFor

获取let i = index循环中当前元素的索引