Javascript 如何在angular2中选择多个列表

我想选择多个列表（我的意思是当你点击列表时，颜色会从灰色变为粉色。因此，当你点击多个列表（其他列表）时，我想将它们的颜色从灰色变为粉色）。当你再次点击列表时，它会改变原始颜色。（从粉红色到灰色）

如何使用类绑定实现这一点

我在

[class.active]

中使用了下面的代码，请查看并告诉我提示

HTML:

CSS:

---

不要使用

[class.active]=“i==selectedList”

，而尝试使用

[ngClass]=“{'active'：i==selectedList}”

以下是使用类绑定在单击事件中从灰色变为粉色和从粉色变为灰色的示例。 Html文件

<ul class="list" [class.active]="isActive" (click)="changeActive()" *ngFor="let item of fruits">
  <li>Fruit Name :{{item.name}}</li>
</ul>

css文件

.list.active {
    background-color:#ff4081 !important;
    color: white;
}

.list{
    background-color:gray !important;
    color: white;
}

这里我正在做样本数据，请替换您的数据和变量。 我测试了完美的工作。请尝试一次，如果有任何错误，请告诉我

这是输出窗口

---

[ngClass]=“{'active'：i==selectedList}”

这是在选择时应用类的方式。您可以在其他条件下添加更多类，这些条件用逗号分隔。因此，当您再次单击列表时，我想用原始颜色更改颜色。在这种情况下，如何添加？像这样<代码>[ngClass]=“{'active'：i==selectedList，'inactive'：yourNewConditionHERE}”然后只需在css中添加非活动类。有

active

和

inactive

是类吗？是的，它们是类。因此，当您再次单击列表时，我想用原始颜色更改颜色。在这种情况下，如何添加？这样地。czeckd.github.io/angular-dual-listbox/demo您可以为列表中的每个项目设置一个布尔数组，只需切换选中/未选中的值。在这种情况下，ngClass看起来像这样的

[ngClass]=“{'active'：checkedItems[i]}”

.list.active {
    background-color:#ff4081 !important;
    color: white;
}

<ul class="list" [class.active]="isActive" (click)="changeActive()" *ngFor="let item of fruits">
  <li>Fruit Name :{{item.name}}</li>
</ul>

 public isActive: boolean = false;

 changeActive() {
    this.isActive = !this.isActive; //here iam changing flag to true to false and false to true
    console.log("Is Active Value",this.isActive);
  }

.list.active {
    background-color:#ff4081 !important;
    color: white;
}

.list{
    background-color:gray !important;
    color: white;
}