【问题标题】:Angular change background color of selected array from list in *ngFor从 *ngFor 列表中选择数组的角度更改背景颜色
【发布时间】:2021-01-29 07:13:31
【问题描述】:

当我一一点击多个列表时;我希望它们在 *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 中,并且具有蓝色背景,再次单击时;背景已移除。

【问题讨论】:

    标签: css angular ngfor


    【解决方案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);  
    }
    

    【讨论】:

      猜你喜欢
      • 2020-03-15
      • 2018-03-04
      • 1970-01-01
      • 1970-01-01
      • 2021-12-31
      • 2017-02-13
      • 1970-01-01
      • 2022-01-11
      • 2012-05-16
      相关资源
      最近更新 更多