Как переключить цвет фона строк в * ngFor в Angular / TypeScript?

Question

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

Я пытался понять различные решения здесь, на SO, но в итоге не смог заставить его работать.Вот что происходит: я нажимаю на строку, она подсвечивается.Если затем я нажимаю на строку 2, она выделяет первый.Но если я щелкну на строке 3, она выделит как 2, так и 3. Если я нажму на 4, будут выделены только 2 и 4, а 3 - невыделенными ... так что можно выделить только строки на неровных числахкод атм.

Вот мой TypeScript: public changeTableRowColor(idx: any) {this.rowClicked = idx;}

Вот мой HTML:

<tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
    [style.background-color]="rowClicked == idx ? 'yellow' : (even ? '#ffffff' : 'f1f1f1')"
    (click)="changeTableRowColor(idx)">
  <td>{{ ApiDataFile.name }}</td>
  <td>{{ ApiDataFile.surname }}</td>
</tr>

---

Решение:

  <tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
  [style.background-color]="ApiDataFile.rowClicked ? 'yellow' : (even ? '#ffffff' : '#f1f1f1')"
  (click)="ApiDataFile.rowClicked = !ApiDataFile.rowClicked">
  <td>{{ ApiDataFile.name }}</td>
  <td>{{ ApiDataFile.surname }}</td>
</tr>

что я ожидаю: я могу выделить несколько строк и выделить их, щелкнув по ним.

РЕДАКТИРОВАТЬ: опубликовал решение

Answer 1

Вы можете поместить фиктивное свойство в свой объект и обрабатывать его при клике.

<tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
    [style.background-color]="ApiDataFile.rowClicked ? 'yellow' : (even ? 'red' : 'green')"
    (click)="ApiDataFile.rowClicked = !ApiDataFile.rowClicked">
      <td>{{ ApiDataFile.name }}</td>
      <td>{{ ApiDataFile.surname }}</td>
    </tr>

Answer 2

Вы можете добавить [ngClass] = {'classToApply': clicked === index} в сочетании с (click) = "step = index; '"

Что-то вроде:

<li [ngClass]="{classToApply: clicked===index}"(click)="step=index;">Data</li>

Answer 3

Просто добавьте условие в changeTableRowColor:

changeTableRowColor(idx: any) { 
  if(this.rowClicked === idx) this.rowClicked = -1;
  else this.rowClicked = idx;
}

Это установит rowClicked в -1, если выбранный в настоящее время rowId равен ранее выбранному идентификатору строки.

Вот рабочий Образец StackBlitz для вашей ссылки.