从 *ngFor 列表中选择数组的角度更改背景颜色

Question

当我一一点击多个列表时；我希望它们在 *ngFor 列表上有蓝色背景。再次单击列表时；我希望从 selectedList 数组中删除和删除背景。感谢您的所有帮助。

app.component.html

<div class="list">
    <span *ngFor="let list of lists; let i=index" (click)="onListSelect(list)">
          {{ list }}
    </span>
</div>

app.component.ts

selectedList = [] // selected list
onListSelect(list) {
   this.selectedList.push(tag);  
}

//我可以单击任意数量的列表，当我单击它们时，我希望它们在 onListSelect 中，并且具有蓝色背景，再次单击时；背景已移除。

Answer 1

将list 集合重构为object 的数组

// declare tags: any[]; in component.ts file
this.tags = this.lists.map((l, index) => ({index, tagName: l}))

您可以在每个项目上使用ngClass 来突出显示该行。

<div class="list">
    <span [ngClass]="{'highlight': tag.selected}" 
      *ngFor="let tag of tags; let i=index" 
       (click)="onListSelect(tag )">
          {{ tag.tagName }}
    </span>
</div>

另外，您必须在 onListSelect 函数中进行更改。

onListSelect(tag) {
   tag.selected = !tag.selected;
   this.selectedList.push(tag);  
}