如何更改由ngFor循環的div的文本顏色？

Question

我有一個使用ngFor循環的div，現在無論何時點擊循環中的一個div，我想要更改該特定div的文本顏色，然後如果在循環中單擊任何其他div，則那個div只會改變他的顏色，而以前點擊過的div會將其文字顏色改變爲初始值。 [僅使用Angular 2]。

例如：

<div *ngFor="let x of y; let i= index" (click)="changeColor()"></div> 

Answer 1

一個工作解決問題的方法如下：

更改模板的代碼如下：這裏

<div [ngClass]="{'selected-color' : i==selectedIndex}" 
    *ngFor="let x of y; let i= index" (click)="changeColor(i)"> 

    <!-- print anything here --> 

</div> 

請注意，我說[ngClass]和綁定它有一個條件。還要注意的是，指數傳遞到changeColor(i)

現在，在您的組件類：

public selectedIndex; 

changeColor(i){ 
    this.selectedIndex = i; 
    } 

定義的CSS類的背景顏色，如你所願：

.selected-color{ 
    background-color: red; 
} 

一切都應該工作現在好了。