Как переключить цвет фона строк в * ngFor в Angular / TypeScript?
Я новичок в использовании Angular 6. Я хочу изменить цвет фона строки таблицы, когда я нажимаю на нее, и когда я нажимаю на нее повторно, возвращаю исходный цвет.
Я пытался понять различные решения здесь, на SO, но в конце концов не смог заставить их работать. Вот что произошло: я нажимаю на строку, она выделяет ее. Если затем я нажму на строку 2, она отключит первую. Но если я нажму на строку 3, она выделит и 2, и 3. Если я нажму на 4, будут выделены только 2 и 4, а 3 не будет выделено ... так что только строки с нечетными числами могут быть выделены кодом atm.
Вот мой 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>
чего я ожидаю: я могу выделить несколько строк и отменить их, щелкнув по ней.
Обновлено: опубликовал решение
Ответы 3
Просто добавьте условие в changeTableRowColor:
changeTableRowColor(idx: any) {
if (this.rowClicked === idx) this.rowClicked = -1;
else this.rowClicked = idx;
}
Это установит для rowClicked значение -1, если текущий идентификатор строки равен идентификатору строки, по которой щелкнули ранее.
Странный. Не могли бы вы проверить рабочий образец StackBlitz? У меня там нормально работает.
Я не мог заставить его работать, но ваше решение было очень похоже на решение Паршвы, так что, вероятно, это было недоразумение с моей стороны. Спасибо за твою помощь, дружище
Вы можете поместить фиктивное свойство в свой объект и обработать его одним щелчком мыши.
<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>
вы можете добавить [ngClass] = {'classToApply': clicked === index} вместе с (click) = "step = index; '"
Что-то типа:
<li [ngClass] = "{classToApply: clicked===index}"(click) = "step=index;">Data</li>
привет спасибо за ваше время. После добавления этой строки строка больше не выделяется, когда я нажимаю на нее. С моим предыдущим кодом вот что происходит: я нажимаю на строку, она выделяет ее. Если затем я нажму на строку 2, она отключит первую. Но если я нажму на строку 3, она выделит как 2, так и 3. Если я нажму на 4, будут выделены только 2 и 4, а 3 не будут выделены ... поэтому могут быть выделены только строки с нечетными числами.