如何在angular2中选择多个列表

Question

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

我怎样才能使用类绑定？

我在[class.active]下面使用了以下代码，请查看并告知我提示。

HTML：

<div class="list" *ngFor="let list of lists | filter: searchText; let i = index" (click)="setClickedList(i)" [class.active]="i == selectedList">
   <mat-list-item role="listitem">{{list}}</mat-list-item>
</div>

JS：

lists = ['Team Name1', 'Team Name2', 'Team Name3', 'Team Name4', 'Team Name5'];

CSS：

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

Answer 1

而不是[class.active]="i == selectedList"，请尝试[ngClass]="{'active': i == selectedList}"

Answer 2

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

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

css文件

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

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

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

这是输出窗口。