由标签deosnt组成的模态弹出窗口使用角度2应用活动类颜色

时间:2017-10-04 11:55:43

标签: angular angular-material2 ngx-bootstrap

enter image description here enter image description here我有一个模态弹出窗口,其中有模态正文标签。当我调用模态弹出窗口但是没有应用活动选项卡颜色时。我使用modal ngx-bootstrap用于模态弹出和材料制表模块使用角度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>

1 个答案:

答案 0 :(得分:0)

将你的setter:selectedItem = i与你的getter进行比较:selectedImageItem === i