Модальное всплывающее окно, состоящее из вкладок, не применяет цвет активного класса с помощью angular 2

введите здесь описание изображениявведите описание изображения здесьУ меня есть модальное всплывающее окно с модальными вкладками тела. Когда я вызываю модальные всплывающие окна, но для активной вкладки цвет не применяется. Я использовал модальный ngx-bootstrap для модуля модальных всплывающих окон и вкладок материалов, используя angular 2. Любая помощь была бы отличной.

Ссылка на компонент материала

    <button md-button (click)="showLibrary()" class="upload-img-button"></button>
<!-- Image Library Popup -->
<div class="modal fade" bsModal #imageLibrary="bs-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
    aria-hidden="true">
    <div class="modal-dialog image-lib-popup">
        <div class="modal-content">
            <div class="modal-body img-library">
                <button type="button" mdButton (click)="imageLibrary.hide()" class="close">
                  <md-icon class="material-icons">close</md-icon>
                </button>
                <md-tab-group class="tabs" [selectedIndex]="selectedTabIndex" >
                    <md-tab label="IMAGE LIBRARY">
                        <div [hidden]="options.imageType ==='images'">
                            <label class="title">Logos</label>
                            <div class="logo-section">
                                <ngx-gallery [options]="galleryOptions" [images]="galleryImages" (change)="getSelectedLogo($event)"></ngx-gallery>
                                <div class="">
                                    <image-upload class="" (onUpload)="onUploadDone($event,'logo')" [uploadOptions]="uploadOptions" [cropOptions]="{imageType:'logo'}"> </image-upload>
                                </div>
                            </div>
                        </div>
                        <div class="image-gallery" [hidden]="options.imageType ==='logo'">
                            <!--<label class="title">Images</label>-->
                            <ul class="logos">
                                <li class="" *ngFor="let image of imagesList;let i = index" (click)="imageSelected(i);selectedItem = i" [attr.data-index]="i"
                                    [ngClass]="{ 'img-media-container' : selectedImageItem === i }">
                                    <img src={{image}}/>
                                </li>
                            </ul>
                        </div>
                        <div class="d-flex justify-content-end abs-button">
                            <button md-button class="button blue-btn " (click)="setSelectedImages()" [disabled]="chooseFromLibrary">Continue</button>
                        </div>
                    </md-tab>
                    <md-tab label="UPLOAD IMAGES">
                        <label class="title"></label>
                        <image-upload class="" (onUpload)="onUploadDone($event,'images')"  [uploadOptions]="uploadOptions" [cropOptions]="{imageType:'image'}"> </image-upload>
                    </md-tab>
                </md-tab-group>
            </div>
        </div>
    </div>
</div>

person Deepak Jawalkar    schedule 04.10.2017    source источник


Ответы (1)


Сравните ваш сеттер: selectedItem = i с вашим геттером: selectedImageItem === i

person Carsten    schedule 04.10.2017
comment
но я беспокоюсь о том, чтобы применить активный класс к библиотеке изображений, и его нижняя граница приобретет фиолетовый цвет. - person Deepak Jawalkar; 04.10.2017
comment
вы можете взглянуть на изображение для справки выше, которое, как ожидается, будет. - person Deepak Jawalkar; 04.10.2017