Изменить цвет выбранного переключателя в цикле ngFor

Question

Я хотел бы что-то изменить (цвет фона, цвет текста, подсветка и т. Д.) Для элемента, выбранного в моем списке переключателей при нажатии / выборе.Список из цикла ngFor элементов, который, я думаю, почему ничего не работает.То, что у меня сейчас есть, меняет цвет, с красного на синий, по щелчку, но это меняет все элементы в списке, а не один выбранный элемент.

Я пытался использовать li :: selection в CSS, но это не сработало.

 <div class="container">
<div class="col-sm-12 form-group">
    <p> <strong> Select Your Subject</strong></p> 
    <ng-container *ngFor="let subs of allSubjects">
      <ul id="subList">
        <li [ngClass]="{'blue' : toggle, 'red': !toggle}">
 <label>
<input checked type="radio" name="ClassTimesSubjects" 
 [(ngModel)]="subs.classTimeSubjectsName"
[value]="subs.classTimeSubjectsName" 
[(ngModel)]="ClassTimesSubjects" #ClassSubjects="ngModel" required
(click)="enableDisableRule()">
   {{ subs.classTimeSubjectsName }}
   <img [src]="subs.classTimeSubjectsImage" id="subPics">
   </label>         
        </li>
      </ul>
    </ng-container>
  </div>
  </div>

Typescript ...

   toggle = true;
   status = "Enable";
   public allSubjects: Array<any>;

   enableDisableRule(job) {
      this.toggle = !this.toggle;
      this.status = this.toggle ? "Enable" : "Disable";
   }

CSS ...

 .blue {
background-color: blue;
   }

 .red {
background-color: red;
   }

Answer 1

Вы должны использовать что-то вроде этого

<ul>
  <li *ngFor="let item of data" [ngClass]="{'blue' : selectedValue==item.id, 'red': selectedValue!=item.id}" >
    <input type="radio"  name="group" [(ngModel)]="selectedValue" [value]="item.id"/> {{item.name}}</li>
</ul>

Машинопись

selectedValue=1
  data = [
    { id: 1, name: 'A', selected: false },
    { id: 2, name: 'B', selected: true },
    { id: 3, name: 'C', selected: false }]
}

Stackblitz

Answer 2

Попробуйте использовать ngModel / Data Binding. Вы можете следовать приведенному ниже коду.

<ul>
  <li [ngClass]="{'blue' : checked, 'red': !checked}">
    <input type="checkbox"  [(ngModel)]="checked" />
  </li>
</ul>

Полный код здесь - https://stackblitz.com/edit/angular-xsfx9q

Answer 3

Для достижения ожидаемого результата используйте индексированный переключатель для каждого элемента в ngFor

1. Установить индекс для переключения для каждой радиокнопки
2. При каждом переключателе переключателя сбросьте значения массива переключений на false
3. Обновлять конкретный индекс на true каждый раз по переключателю
4. При включении переключателя фон элементов меняется на синий с красного фона

Пример кода - https://codesandbox.io/s/angular-2be5t

app.component.js

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  toggle = [];
  status = "Enable";
  allSubjects = [
    {
      classTimeSubjectsName: "test1",
      classTimeSubjectsImage: ""
    },
    {
      classTimeSubjectsName: "test12",
      classTimeSubjectsImage: ""
    }
  ];

  enableDisableRule(i) {
     let idx = 0;
while (idx < this.allSubjects.length) {
  this.toggle[idx] = false;
  idx++;
}

this.toggle[i] = !this.toggle[i];
this.status = this.toggle[i] ? "Enable" : "Disable";
  }
}

<div class="container">
  <div class="col-sm-12 form-group">
    <p><strong> Select Your Subject</strong></p>
    <ng-container *ngFor="let subs of allSubjects; let i =index">
      <ul id="subList">
        <li [ngClass]="{'blue' : toggle[i], 'red': !toggle[i]}">
          <label>
            <input
              checked
              type="radio"
              name="ClassTimesSubjects"
              [(ngModel)]="subs.classTimeSubjectsName"
              [value]="subs.classTimeSubjectsName"
              [(ngModel)]="ClassTimesSubjects"
              #ClassSubjects="ngModel"
              required
              (click)="enableDisableRule(i)"
            />
            {{ subs.classTimeSubjectsName }}
            <img [src]="subs.classTimeSubjectsImage" id="subPics" />
          </label>
        </li>
      </ul>
    </ng-container>
  </div>
</div>