如何在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;
}

我在這里做示例數據，請替換您的數據和變量之類的。 iam測試了完美的工作方式。 如果有任何錯誤，請嘗試一次，請讓我知道。

這是輸出窗口。