Question

下面是我的HTML代码，我想在单击该特定数组索引时更改NameList数组的颜色，例如，如果我单击NameList[1] 只有该元素的背景颜色变为绿色，再次单击NameList[2]然后NameList[1]背景变为白色，而nameList[2]变为绿色，如何将其固定在角度6中。

 
 <div>
 <ul *ngFor="let name of NameList">
      <tr>
         <td class=""  (click)="nameDetail(name)">{{name}}</td>
        </tr>
  </ul>
  </div>

Answer 1

您可以有条件地使用NgClass，这是参考链接https://angular.io/api/common/NgClass

Answer 2

您可以按照ngClass的建议使用Ritik，也可以使用ngStyle

[ngClass]="{'changeColor': name.active}"

[ngStyle]="{'background': name.active ? 'green':'white'}"

这是工作demo

的链接

Answer 3

您可以通过ngClass使用基于条件的CSS

<div [className]="condition ? 'example-class' : 'other-class'"></div>


<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">..
</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

让我知道您是否仍然无法更改背景颜色。

Answer 4

//html code

<td (click)="select(name)"
 [class.highlight]="isSelected(name)"
>{{name}}</td>

//Ts code
selectedName = '';

select(name){
    this.selectedName = name;
}

isSelected(name){
    return this.selectedName === name;
}
//css code
.highlight{
  background: #42A948; /* green */
}

如何在角度6中更改特定的数组元素背景颜色

4 个答案: