Добавить стиль к определенному элементу углового 6

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 в массиве, если это не так, и если он удаляет его из массива, но когда я добавляю его, я также хочу поставить определенный стиль, например желтый фон, но это последнее, я не знаю, какчтобы сделать это, я не знаю, как сказать angular, что я помещаю определенный стиль в элемент "li", определенный сгенерированным циклом "ngfor", когда я нажимаю на элемент.

этоизображение в интерфейсе

Answer 1

Вы можете сделать это несколькими способами:

1. , чтобы установить дифференциал class с [ngClass]="" для каждогоli и стиль в CSS

, например:

<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>

Answer 2

Вы можете сделать следующее.

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 будет применяться к каждому выбранному элементу списка.