изменение угла изменения цвета элемента элемента мыши путем удаления другого цвета фона элемента

Question

привет, я создаю систему рейтинга, у меня есть 5 элементов div. Я хочу, чтобы при нажатии на каждый из них цвет фона элемента становился серым.

Я написал директиву, чтобы они выполняли цвет фона приложения. но как я могу сделать эту логику, чтобы, когда один элемент щелкнул по другому элементу, у него не было цвета фона .... потому что я хочу, чтобы только что выделенный элемент имел серый фон ... пожалуйста, помогите спасибо

  takeVote(e,event){
    this.rating = e;
  }

HTML:

      <div class="rating_start">
        <div class="has_start_con " appVote>
          <a (click)="takeVote(5,$event)" >
            <div class="t"> prefect</div>
            <div class="i"><i class="mdi mdi-emoticon-excited"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(4,$event)">
            <div class="t">good</div>
            <div class="i"><i class="mdi mdi-emoticon-happy"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(3,$event)">
            <div class="t">normal</div>
            <div class="i"><i class="mdi mdi-emoticon-neutral"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(2,$event)">
            <div class="t">not bad</div>
            <div class="i"><i class="mdi mdi-emoticon-sad"></i></div>
          </a>
        </div>
        <div class="has_start_con" appVote>
          <a (click)="takeVote(1,$event)">
            <div class="t">bad</div>
            <div class="i"><i class="mdi mdi-emoticon-dead"></i></div>
          </a>
        </div>
      </div>

моя директива:

@Directive({
  selector: '[appVote]'
})
export class VoteDirective {

  constructor(public elm: ElementRef, public renderer: Renderer2) {
  }


  @HostBinding('style.background-color') background: string;


  @HostListener('click') onClick() {
    //let part = document.getElementsByClassName('has_start_con')
    //this.renderer.setStyle(part, 'backgroundColor', 'none');
    this.renderer.setStyle(this.elm.nativeElement, 'backgroundColor', '#d2d2d2');

    //this.background = 'red'
  }

}

Answer 1

Гораздо проще сделать это в шаблоне:

<div *ngFor="let item of [1,2,3,4,5];let i = index" 
         [style.background]="selected==i?'red':'grey'" (click)="selected=i">
    Option {{i}}
</div>

где selected содержит индекс выбранных элементов. щелчок по элементу div должен изменить его значение и вызвать изменение цвета фона. Набор в классе: selected = 0

Демо

Если вы все еще хотите использовать директиву, должно сработать что-то вроде этого:

  @HostListener('click', [])
  onClick(): void {
    let parent = this.elm.nativeElement.parentNode;
    for (var i = 0; i < parent.children.length; i++) {
      parent.children[i].classList.remove('red');
    }
    this.elm.nativeElement.classList.add('red');
  }

где:

.red{
  background-color:red
}

Демо

Answer 2

Попробуйте получить значение рейтинга 1 - 5 из события и назначить это значение свойству selectedRating. Затем объявите свойство isSelected, назначающее nativeElement из выходного события, и условно примените селектор css nth-child к контейнеру div, который также имеет class = "rating_start", где nth-child (selectedRating).

В качестве альтернативы см. Раздел "Техническая документация", раздел "Синтаксис шаблона" для условного применения стилей:

<div [class.extra-sparkle]="isDelightful">

• Привязывает наличие дополнительного блеска класса CSS на элементе к достоверности выражения isDelightful.