如何觸發具有多個重複的div的唯一事件？ （Angular 2）

Question

所以我在ngFor循環中創建了幾個div。如果我點擊其中一個div，我想添加一個類到只有被點擊的div。

目前我只是在[ngClass]上使用布爾標誌來呈現測試用例，但我不知道如何修改這樣的東西，以便每個生成的div都可以有唯一的標誌。

這是一個演示，

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