показать класс только для щелкнутого элемента angular 2

Я не знаю, как установить видимый класс только для щелкнутого элемента в частичном компоненте. Итак, у меня есть тема с:

<div class="photo-container" *ngFor ="let i of modalImages; let index = index">
       <div [ngClass]="ImageContainer">
           <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
           <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
       </div>
</div>

В компоненте я их инициализирую..

export class ImageModal implements OnInit, AfterViewInit {
    @ViewChild('reviewFileInput') reviewFileInput: ElementRef;
    @Input('modalImages') public modalImages: any;
    @Input('imagePointer') public imagePointer: number;
    @Output('cancelEvent') cancelEvent = new EventEmitter<any>();
    @Input('imageClass') public imageClass: any;
    ...

Затем в этом следующем шаблоне пусть он вызовет «добавить фото-компонент», который я хочу использовать в этом классе, который я объявляю следующим:

<ImageModal #imageModal
                       [modalImages]="images"
                       [isReviewPhotos]="true"
                       [imageClass]="classMap"
                       (cancelEvent)="cancelImageModel()"
                       [options]="options"
                       [isUploadButtonAvailable]="isUploadButtonAvailable"
                       (clickEvent)="onUploadClick()"
                       (handleEvent)="handleNgUpload($event)"
                       (deleteEvent)="deleteImage($event)"
                       (handleSelectedImgEvenet)="onImageClick($event)"
                       (imageContainer)="{'img-media-container': isImageSelected}"> // And this class which I want to use 
</ImageModal>

затем в компоненте add-photo-component я хочу установить этот скрытый класс на щелкнутое изображение

onImageClick($event) {
        if ($event && $event.index >= 0) {
            this.selectedImage = this.images[$event.index];
            this.isImageSelected = !this.isImageSelected;
        }
    }

стили:

.img-media-container{
    border-radius: 10px;
    border: 3px solid #4774c5;
    padding: 3px;
}

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


typescript angular html css ng-class
person Vitaliy    schedule 27.03.2017    source источник
comment
К какому элементу вы хотите добавить класс? каков ваш частичный компонент? на элементе click в вашем *ngFor ?   -  person Umar Younis    schedule 27.03.2017
comment
поправьте меня, частичный компонент - это то, где я использую ‹ImageModal #imageModal....›‹/ImageModal›. И в этот компонент я хочу добавить класс   -  person Vitaliy    schedule 27.03.2017
comment
Я предполагаю, что вы делаете это совершенно неправильно. Я вижу некоторые ошибки. Не могли бы вы опубликовать весь компонент ImageModal и родителя, где вы пытаетесь вызвать этот компонент?   -  person Jaroslaw K.    schedule 27.03.2017
comment
@JaroslawK., обновлено   -  person Vitaliy    schedule 27.03.2017

Ответы (2)


arrow_upward
4
arrow_downward

Ваш пост беспорядочный, и я не знаю, какой код относится к какому компоненту. Но добавить класс в зависимости от выбранного элемента просто и всегда выглядит одинаково. Попробуйте таким образом:

<div *ngFor ="let image of modalImages; let index = index">
       <div [class.img-media-container]="image === selectedImage" >
          <!-- some code -->
       </div>
</div>

Вы можете найти тот же пример кода в официальном руководстве от Angular. создатели. Поиск в главе: Стиль выбранного героя

person Jaroslaw K.    schedule 27.03.2017
comment
Обновил тему, проверьте еще раз. Переменная selectedImage находится в компоненте add-photo, и этот код взят из компонента ImageModal. - person Vitaliy; 27.03.2017

arrow_upward
0
arrow_downward

Это довольно круто в angular 2. Идея сделать это создать и инициализировать массив. При нажатии на div индекс div должен быть помещен внутрь инициализированного массива. И добавьте этот класс в div, который удовлетворяет только условию.

Для получения индекса.

<div class="photo-container" *ngFor ="let i of modalImages; let index = index"></div>

Для добавления класса CSS

   <div [class.ImageContainer]="array[i]=i">
       <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
       <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
   </div>

(ImageContainer — это имя класса, а array[i]=i — это условие)

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html перейдите по ссылке для более подробной информации

person Aswin KV    schedule 27.03.2017