angular *ngFor循环出的内容可以点击选择多个

Question

我用*ngFor循环出了内容我想点击某个标签时标签颜色改变 再次点击变回原来的颜色 并且可以多选大佬们 这个效果要如何实现啊以下是我的代码

Answer 1

我的方案是封装一下 labels 将其替换成 Object, libraryService.labelsArry 封装成

Object 数组

{

   text:'test',

   selected: false

}

然后在 span 上添加一个 class ，由 selected 决定

html:

<span *ngFor="let labels of libraryService.labelsArry" [class.selected]="labels.selected"   (click)="chooseLabel(labels)"  >{{labels.text}} </span>

css:

  .selected{

      color : red;

  }

ts:

chooseLabels(item){

   item.selected=!item.selected;

}