Модальный с ползунком изображения - получить имя и нумерацию - PullRequest
Новая
       4

Модальный с ползунком изображения - получить имя и нумерацию

1 голос
/ 10 марта 2020

Я создал модал, содержащий ползунок изображения, используя bootstrap ngb-карусель.

Есть ли способ отобразить имя текущего изображения ползунка в заголовке режима и нумерацию изображения в модальный нижний колонтитул?

То есть, если одно из изображений ползунка находится на изображении, в модальном заголовке я намереваюсь представить ваше имя, а в нижнем колонтитуле я намерен представить текущую нумерацию, то есть как У меня есть 3 изображения, и я на 1-м, в нижнем колонтитуле я должен иметь 1/3 При смене изображения слайдера меняются имена и нумерация.

Может кто-нибудь мне помочь? Я не смог реализовать ни одно событие, которое позволило бы мне получить это: (

DEMO

Код 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Show images Modal
</button>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Name Image !</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <ngb-carousel id="carousel" #carouse *ngIf="data" (slide)="change($event)">
                    <ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
                        <div class="picsum-img-wrapper">
                            <img [src]="imgIdx.image" [alt]="">
                          </div>
                            <div class="carousel-caption">
                                <h3>{{imgIdx.head}}</h3>
                                <p>{{imgIdx.data}}</p>
                            </div>
                    </ng-template>
                </ngb-carousel>
            </div>
            <div class="modal-footer">
                Number images (1/3)
            </div>
        </div>
    </div>
</div>

image

1 Ответ

1 голос
/ 10 марта 2020

просто объявите три переменные: (* * 

  //it's necesary, at first give manually the initial value

  imgName:string=this.data[0].name
  imgNumber:number=1
  imgLength:number=this.data.length

в функции изменения измените эти переменные: 

  change(data){
    this.imgNumber=data.current+1;
    this.imgName=this.data[data.current].name
  }

Ваш. html используйте эти переменные: 

<div class="modal" id="myModal">
            ...
        <h4 class="modal-title">{{imgName}}!</h4>
            ....
        <div class="modal-footer">
            Number images ({{imgNumber}}/{{imgLength}})
        </div>
        ...
</div>

ваш разветвленный стек

(*) Если вы хотите узнать больше об отображаемых данных и интерполяции, см. Документы

...