Actualmente tengo algunos chips de filtro personalizados dentro de un ngFor y actualmente los tengo configurados para permitir que solo un chip a la vez cambie el color de fondo cuando hace clic en él. Quiero cambiar esto para poder seleccionar varias fichas y hacer que varias de ellas cambien el color de fondo cuando se seleccionen. ¿Cómo debo abordar esto?
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>Componente:
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; }Pruebe el siguiente código.
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" >Puede cambiar active para que sea una matriz de números que realizaría un seguimiento de todas las categories seleccionadas. Luego puede verificar con active.includes(i) si la category está seleccionada.
Archivo mecanografiado:
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); } }archivo 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>