html - Angular/ng-bootstrap - 現在のスライドでプログレスバーを変更する

私の意図は、スライドごとにプログレスバーの幅を変更することです。私は現在、Bootstrapによって提供されるプログレスバーを使用しています。これまでのところ、スライドごとにHTMLでイベントを呼び出しています。このイベントは、スライドに関するこの情報を取得します:

Console:
{prev: "ngb-slide-0", current: "ngb-slide-1", direction: "left"}

プログレスバーは幅に関する情報を currentSlide (app.component.ts) から取得しますが、これは問題なく動作します:

<div class="progress">
    <div class="progress-bar" role="progressbar" [style.width.%]="currentSlide"></div>
  </div>

これまでのTypeScriptの進行状況:

export class AppComponent {

  public currentSlide: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(slide: any): void {
    console.log(slide);
  }
}

私の解法の説明:

if current: ngb-slide-0 then currentSlide = 33,33
if current: ngb-slide-1 then currentSlide = 66,66 
if current: ngb-slide-2 then currentSlide = 100

これらの言葉をコードに変換するにはどうすればよいですか？
事前にありがとうございます、ティム



HTMLの残り（スライダーの例）：

<div class="container">
  <div class="row">
    <div class="col-12">
      <ngb-carousel *ngIf="images" (slide)="changeProgress($event)">
        <ng-template ngbSlide>
          <img [src]="images[0]" alt="First slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[1]" alt="Second slide">
        </ng-template>
        <ng-template ngbSlide>
          <img [src]="images[2]" alt="Third slide">
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>

回答 #1

スライドの進行状況の現在のパーセンテージを保持する変数を作成し、changeProgress メソッドを実行したときにその値を変更し、そのパーセンテージを次のように進行状況バーにバインドします：

<div class="progress-bar active" role="progressbar" [style.width.%]="currentPercentage"
             [attr.aria-valuenow]="currentPercentage" aria-valuemin="0" aria-valuemax="100">{{this.currentPercentage}}%</div>

そしてあなたのコンポーネントでは、次のように見えるはずです

export class AppComponent {

  public currentSlide: number;
  public currentPercentage: number;

  images = ['assets/images/image1.jpg', 'assets/images/image2.jpg', 'assets/images/image3.jpg'];

  changeProgress(event: any): void {
    this.currentSlide = Number(event.current.substring(10));//10 because you want to remove the string 'ngb-slide-' and get only the selected image
    this.currentPercentage = this.currentSlide / this.images.length * 100;
  }
}

お役に立てば幸いです！そして、このようにすると、将来的にスライドショーにさらに多くの画像を追加でき、動的なコードを持つことができます（カルーセルのすべてのng-templateを表示するためにng-Forを使用することをお勧めします）

回答 #2

このコードを試してください：

// Add the caroussel to you component class, so you can access the slides array
@ViewChild(NgbCarousel) ngbCarousel;

....

changeProgress(slide: any): void {
    // Find the current slide index.
    let slideIndex = this.ngbCarousel.slides._results.findIndex( elem => {
      return elem.id == slide.current;
    });

    // Convert it to a percentage
    this.currentPercentage = (slideIndex + 1) / this.images.length * 100;
}