带图像滑块的模式 - 获取名称和编号

Question

我使用 bootstrap ngb-carousel 创建了一个包含图像滑块的模式。

有没有办法在模态页眉中显示当前滑块图像的名称并在模态页脚中显示图像编号？

也就是说，如果其中一张滑块的图像在图像中，我打算在模态页眉中显示您的姓名，在页脚中我打算显示当前编号，也就是说，因为我有 3 张图像和我在第一个，在页脚我必须有 1/3。更改滑块的图像时，名称和编号也会发生变化。

谁能帮帮我？我无法实施任何允许我得到这个的事件:(

代码

<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>

Answer 1

只需声明三个变量：(*)

  //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>

your forked stackblitz

(*)如果您想了解有关显示数据和插值的更多信息，请参阅 the docs

带图像滑块的模式 - 获取名称和编号

Modal with image slider - get name and numbering

angular

typescript

twitter-bootstrap

bootstrap-4

ng-bootstrap