我目前在 ngFor 中有一些自定義過濾器芯片，目前我將它們設定為一次只允許一個芯片在您單擊它時更改背景顏色。我想改變這一點，以便我可以選擇多個芯片，并在選擇它們時讓多個芯片改變背景顏色。我應該如何處理這個問題？
HTML：
<div *ngFor="let category of categories; let i = index" class=" filter-chips px-3"
(click)="active = i; chipAdded(category)" [ngClass]="active === i ? 'chip-clicked': '' ">
{{category}}
</div>
零件：
active: any;
CSS：
.filter-chips {
min-width: 50px;
height: 30px;
background-color: grey;
border: 1px solid $grey-04;
box-sizing: border-box;
border-radius: 24px;
text-align: center;
color: $grey-02 !important;
cursor: pointer;
}
.chip-clicked {
background-color: green;
color: white !important;
border-color: white !important;
}
uj5u.com熱心網友回復：
試試下面的代碼。
onChildSelect(Child)
{
for (let myChild of this.children) {
myChild.BackgroundColour = "white";
}
Child.BackgroundColour = "red";
}<li style="cursor: pointer" class="list-group-item"
*ngFor="let Child of children" (click)="onChildSelect(Child)"
[style.background-color]="Child.BackgroundColour" >uj5u.com熱心網友回復：
您可以更改active為一個數字陣列，用于跟蹤所有選定的categories. 然后您可以檢查active.includes(i)是否category選擇了。
打字稿檔案：
public categories = ['Category 1', 'Category 2', 'Category 3'];
public active: number[] = [];
chipAdded(index: number): void {
if (this.active.includes(index)) {
this.active = this.active.filter((item) => item !== index);
} else {
this.active.push(index);
}
}
HTML檔案：
<div *ngFor="let category of categories; let i = index" class="filter-chips px-3"
(click)="category.active = true; chipAdded(category)" [ngClass]="category && category.active ? 'chip-clicked': '' ">
{{category}}
</div>
作業示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/389465.html
標籤：javascript html css 有角的 打字稿