Я визуализировал несколько изображений, используя тег. Я хочу изменить цвет фона изображения при нажатии. Но когда я нажимаю на одно изображение, цвет всех изображений меняется.
Вот мой код. Я работаю в Ангуляре.
HTML
<img
[src] = "data.Url" alt = "image"
(click) = "_upload(data.Url)"
[ngClass] = "{'green' : toggle, 'red': !toggle}"
>
тс
внутри моей функции
this.toggle = !this.toggle;
this.status = this.toggle ? 'Enable' : 'Disable';
Я предполагаю, что для рендеринга нескольких html-элементов вы используете директиву ngFor
, поэтому вы можете использовать index
для присвоения каждому элементу другого класса css
.
Например:
HTML
<div *ngFor = "let option of options; let i = index">
<img
[src] = "option.Url"
(click) = "_upload(option.Url, i)"
[class.selected] = "i === indexSelected" <!--apply the selected css class if condition is TRUE-->
>
</div>
css
.selected {
background-color: green;
}
тс
...
export class YourComponent {
indexSelected: number = -1;
_upload(url: string, index: number) {
// ...
this.indexSelected = index;
}
}
Спасибо всем я сделал это таким образом
<td *ngFor = "let data of responseData; let i= index;" (click) = "active= i" [ngStyle] = "{'background-color': active === i ? '#4b8df2' : 'white' }">
<div>
<img
[src] = "data.Url" alt = "image"
(click) = "_upload(data.Url)"
>
</div>
</td>
Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
этот ответ был полезен. спасибо @Andres2142