Вопрос или проблема
Страница, показанная выше, содержит крупные изображения продуктов с меньшими изображениями под каждым продуктом, демонстрирующими варианты этого продукта. Когда маленькое изображение нажимается, оно должно заменить изображение в большом кадре. Вот сегмент кода, который выводит изображения:
<div class="row">
<div *ngFor="let product of products.products" class="col col-12 col-md-6 col-lg-4 p-3 gallery-col">
<img class="img-fluid" src="assets/img/{{currentGalleryImg}}">
<div class="d-flex justify-content-around mt-2">
<img *ngFor="let img of product.images; let idx=index" class="img-fluid" src="assets/img/{{img}}"
style="width: 47.4px;" (click)="setCurrentGalleryImg(img)"
[ngClass]="{'gallery-product-selected': currentGalleryImg === img }">
</div>
</div>
Эта реализация неисправна. Когда маленькое изображение нажимается, переменная currentGalleryImg устанавливается в компоненте на нажатое изображение. Не только маленькое изображение отображается вместо большого, все крупные изображения на странице заменяются на нажимаемое маленькое изображение. Цель состоит в том, чтобы заменить только большое изображение, соответствующее маленькому изображению.
Ответ или решение
Для успешной реализации функционала замены большой картинки на соответствующую маленькую при клике в Angular, требуются некоторые изменения в вашем коде. Основная проблема, с которой вы столкнулись, заключается в том, что переменная currentGalleryImg является общей для всех продуктов, что приводит к замене изображений всех товаров одновременно. Ниже приведены рекомендации по исправлению данной ситуации.
Шаг 1: Организация структуры данных
Для начала нам необходимо убедиться, что каждый товар имеет свою собственную переменную для хранения текущей картинки. Один из подходов — хранить текущее изображение в самом объекте товара. Предположим, каждый товар имеет свой объект и массив изображений. Вы можете расширить модель данных следующим образом:
export interface Product {
id: number;
name: string;
images: string[];
currentImg: string; // Добавляем переменную для хранения текущего изображения
}
public products: Product[] = [
{
id: 1,
name: 'Товар 1',
images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
currentImg: 'image1.jpg' // Установите изображение по умолчанию
},
// Другие товары
];Шаг 2: Изменение HTML и методов
Теперь, чтобы динамически установить текущее изображение для каждого товара, нам нужно обновить ваш HTML и добавить метод в компонент для изменения текущего изображения.
Обновленный HTML-код будет выглядеть следующим образом:
<div class="row">
<div *ngFor="let product of products" class="col col-12 col-md-6 col-lg-4 p-3 gallery-col">
<img class="img-fluid" [src]="'assets/img/' + product.currentImg">
<div class="d-flex justify-content-around mt-2">
<img *ngFor="let img of product.images; let idx = index"
class="img-fluid" [src]="'assets/img/' + img"
style="width: 47.4px;"
(click)="setCurrentGalleryImg(product, img)"
[ngClass]="{'gallery-product-selected': product.currentImg === img }">
</div>
</div>
</div>Теперь необходимо изменить метод setCurrentGalleryImg, чтобы он принимал объект товара как параметр:
setCurrentGalleryImg(product: Product, img: string) {
product.currentImg = img; // Устанавливаем текущее изображение только для этого товара
}Заключение
Таким образом, каждый товар будет эффективно управлять своим собственным состоянием изображения, что позволит избежать ситуации, в которой все большие изображения изменяются одновременно. Примененный подход улучшает читаемость кода и усложняет структуру, обеспечивая при этом более точный контроль над отображением изображений.
Настоятельно рекомендую протестировать изменения во всех поддерживаемых браузерах для проверки полной функциональности. Эта реализация будет не только удобна для пользователей, но и значительно улучшит взаимодействие с интерфейсом ваших веб-страниц.
SEO-оптимизация
Для улучшения видимости вашего контента в поисковых системах, позаботьтесь о том, чтобы следовало использовать качественные мета-теги и атрибуты изображений, такие как alt, для каждой картинки. Это не только улучшит SEO, но и сделает ваш сайт более доступным для пользователей с ограниченными возможностями.