Question

我在前端有以下代码块：

<li *ngFor = "let cat of this.dataCategory.iconTitleSet" (click)="getTypeFromCategory(cat.title)" class="list-group-item puntero">
    <img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}
</li>

在组件中：

getTypeFromCategory(tipo: string) {
    this.typeItem = tipo.toLowerCase();

    if (this.arrayTipo.includes(this.typeItem)) {
      const i = this.arrayTipo.indexOf( this.typeItem );
      this.arrayTipo.splice( i, 1 );
    } else {
      this.arrayTipo.push(this.typeItem);
    }
}

综上所述，

到目前为止，要做的是在数组中添加从FRONTEND获得的值（如果不是），并且将其从数组中消除，但是当我添加它时，我还想放置一种特定的样式，例如黄色背景，但是最后我不知道该怎么做，我不知道如何对角单击我单击时在“ ngfor”循环生成的特定元素“ li”中放置特定样式在元素上。

this is the image in the frontend

Answer 1

您可以执行以下操作。

HTML

<li *ngFor = "let cat of this.dataCategory.iconTitleSet; let i = index" (click)="getTypeFromCategory(cat.title, index)" class="list-group-item puntero" [class.changeColor]="i == selectedValue">
<img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}

组件

selectedValue: any;
getTypeFromCategory(tipo: string, index) {
     this.selectedValue = index;
    this.typeItem = tipo.toLowerCase();

    if (this.arrayTipo.includes(this.typeItem)) {
      const i = this.arrayTipo.indexOf( this.typeItem );
      this.arrayTipo.splice( i, 1 );
    } else {
      this.arrayTipo.push(this.typeItem);
    }
}

类别changeColor将应用于所选的每个列表项。

Answer 2

您可以通过以下几种方式做到这一点：

1。，为CSS中的每个class和样式设置不同的li和[ngClass]=""

例如：

<li *ngFor = "let cat of this.dataCategory.iconTitleSet;let i=index;" [ngClass]="'title_'+i" (click)="getTypeFromCategory(cat.title)" class="list-group-item puntero">
    <img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}
</li>

在CSS中：

.title_1{}

2。。您可以使用[ngStyle]或style.

进行设置。

<li *ngFor = "let cat of this.dataCategory.iconTitleSet;let i=index;" [style.color]="cat.color" (click)="getTypeFromCategory(cat.title)" class="list-group-item puntero">
    <img [src]="cat.icon"  alt="icon" title="icon" />{{cat.title}}
</li>

为特定元素角6添加样式

2 个答案: