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

【问题标题】：how to change particular array element background color in angular 6如何在角度 6 中更改特定的数组元素背景颜色
【发布时间】：2019-01-01 05:59:06
【问题描述】：

下面是我的 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>

【问题讨论】：

标签： html angular typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

这里是工作链接demo

【讨论】：

我只想改变一个普通的数组元素颜色，例如 NameList=[User1,User2,User3,user4];不使用数组对象
您查看了演示吗？我认为根据您的问题，这可以满足您的要求，但您仍然认为这不能满足您的要求，那么我无法理解您到底想做什么。
您在数组中插入一个对象，它仅适用于键值元素（json 对象），但我需要像 array=[1,2,3] 这样的普通元素。无论如何，它对 json 对象也很有用，谢谢

【解决方案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>

如果您仍然无法更改背景颜色，请告诉我。

【讨论】：

【解决方案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 */
}

【讨论】：

@Ajay 你能解释一下[class.highlight]。因为对我来说有些新东西，我很想知道更多关于这一点的信息。谢谢，如果可能的话，请提供一个示例链接。
@FarhatZaman 请通过此链接angular.io/guide/template-syntax#class-binding