NgbCarousel 选择不切换幻灯片

Question

我正在尝试创建一个缩略图行来切换轮播的幻灯片。

点击事件有效，轮播位置正确 - 我在 NgbCarousel 代码中放置了一些断点，传递的幻灯片 id 是正确的，并且在幻灯片的切换过程中一直有效。但是没有发生幻灯片切换。

旋转木马本身运行良好 - 箭头和指示器。

Angular 6.1.0 ng-bootstrap 3.2.0

更新 它在重新安装节点模块后开始工作。虽然它非常滞后（img 切换需要 10 秒，没有额外的网络请求），但这是另一回事。

模板：

<div class="thumbs mx-auto">
  <ul *ngIf="pics">
    <li *ngFor="let pic of pics" (click)="switchPic(pic)">
      <figure>
        <img src="{{ getIconUrl(pic) }}">
      </figure>
    </li>
  </ul>
</div>
<ngb-carousel #clotheCarousel="ngbCarousel" *ngIf="pics"
  showNavigationArrows="true"
  showNavigationIndicators="true"
  interval="0">
  <ng-template ngbSlide *ngFor="let pic of pics" id="{{ stripSlash(pic.public_id) }}">
    <figure>
      <img src="{{ getThumbUrl(pic) }}" alt="Pic">
    </figure>
  </ng-template>
</ngb-carousel> 

组件：

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import _ from 'lodash';
import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-clothe-gallery',
  templateUrl: './clothe-gallery.component.html',
  styleUrls: ['./clothe-gallery.component.css']
})
export class ClotheGalleryComponent implements OnInit {
  @Input() pics: object[];
  @Input() private thumbWidth: number = 500;
  @Input() private thumbHeight: number = 500;
  @Input() private iconWidth: number = 100;
  @Input() private iconHeight: number = 100;
  @Input() private getCurrent: object;
  // @Output() slide = new EventEmitter();
  @ViewChild(NgbCarousel) carousel: NgbCarousel;
  private currentSlide: string;
  LOG: string = 'clotheGallery';

  constructor() { }

  ngOnInit() {
    console.log(this.LOG, this.pics);
    if (this.pics && this.pics.length) {
      this.currentSlide = this.pics[0]['public_id'];
    }
    // this.slide.emit({
    //   current: this.currentPic
    // })
  }

  onSlideEvent(event) {
    // console.log('event', event);
    // this.currentSlide = event.current;
    // this.slide.emit({
    //   current: this.currentPic
    // })
  }

  get currentPic() {
    return this.currentSlide;
  }

  getThumbUrl(pic) {
    return ClotheGalleryComponent.insertResizeParams(pic, this.thumbWidth, this.thumbHeight);
  }

  getIconUrl(pic) {
    return ClotheGalleryComponent.insertResizeParams(pic, this.iconWidth, this.iconHeight);
  }

  switchPic(pic) {
    console.log(this.LOG, 'switchPic', this.stripSlash(pic.public_id), this.carousel);
    this.carousel.select(this.stripSlash(pic.public_id));
  }

  stripSlash(item) {
    return item.replace('\/', '');
  }

  static insertResizeParams(pic, thumbWidth, thumbHeight): string {
    if (!pic || !pic.url) {
      return '';
    }
    let replace = 'upload';
    let params = `${replace}/w_${thumbWidth},h_${thumbHeight},c_fit`;
    return pic.url.replace(replace, params);
  }

}

Answer 1

尝试改变：

@ViewChild(NgbCarousel) carousel: NgbCarousel;

到：

@ViewChild("clotheCarousel") carousel: NgbCarousel;

并使用（但可能需要索引 id）：

this.carousel.activeId = this.stripSlash(pic.public_id);

代替：

this.carousel.select(this.stripSlash(pic.public_id));

还有：

<ng-template ngbSlide *ngFor="let pic of pics" id=" stripSlash(pic.public_id)">

Answer 2

我不确定您的 ViewChild(NgbCarousel)。您确定您的 console.log(this.carousel) 显示轮播吗？顺便说一句，您可以在函数中使用引用变量

<!--pass "clotheCarousel" in the function-->
<li *ngFor="let pic of pics" (click)="switchPic(clotheCarousel,pic)">

和

//use carousel, not this.carousel
switchPic(carousel:any,pic) {
    console.log(this.LOG, 'switchPic', this.stripSlash(pic.public_id), carousel);
    carousel.select(this.stripSlash(pic.public_id));
  }

Answer 3

有点棘手，选择器是 'ngb-slide-X'，其中 X 是从 0 开始的当前索引。

假设你有一张桌子，当你点击一行时，你想更新一张图片。

@ViewChild(NgbCarousel, { static: true }) carousel: NgbCarousel;

...

click(id: number, i: number) {
  this.carousel.select('ngb-slide-' + i);
}

   <tbody>
  <tr *ngFor="let signature of signatures$|async; index as i" (click)="click(signature.id, i)" [ngClass]="{selected: signature.selected}">
    <th scope="row">{{ i + 1 }}</th>
    <td>{{ signature.date | date:'shortDate' }}</td>
    <td>{{ signature.client }}</td>
    <td>{{ signature.chauffeur }}</td>
    <td>{{ signature.signataire }}</td>
  </tr>
</tbody>

.....

 <ngb-carousel id="carousel" [showNavigationArrows]="false" [showNavigationIndicators]="false">
  <ng-template ngbSlide *ngFor="let signature of (signatures$ | async)">
    <div class="picsum-img-wrapper">
      <img [src]="signature.url || '/assets/img/none.png'" alt="signature.caption">
    </div>
    <div class="carousel-caption">
      <p>{{ signature.caption }}</p>
    </div>
  </ng-template>
</ngb-carousel>