angular - NgbCarousel select不切换幻灯片

Question

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

点击事件有效，旋转木马正确定位 - 我在 NgbCarousel 代码中放置了一些断点，传递的幻灯片 ID 正确，并且它一直工作到幻灯片的切换。然而，幻灯片切换没有发生。

Carousel 本身工作正常 - 箭头和指示器。

Angular 6.1.0 吴引导 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)">