如何更改由ngFor循环的div的文本颜色？

我有一个使用ngFor循环的div，现在无论何时点击循环中的一个div，我想要更改该特定div的文本颜色，然后如果在循环中单击任何其他div，则那个div只会改变他的颜色，而以前点击过的div会将其文字颜色改变为初始值。 [仅使用Angular 2]。如何更改由ngFor循环的div的文本颜色？

例如：

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

来源

2017-06-19 Umair Khan

如果我的答案在下面解决了你的问题，那么你可以接受它作为“正确的”答案。这将有所帮助 – Abrar

一个工作解决问题的方法如下：

更改模板的代码如下：这里

<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; 
}

一切都应该工作现在好了。

来源

2017-06-19 13:27:39 Abrar

如何更改由ngFor循环的div的文本颜色？

回答

相关问题