在没有 *ngFor 的情况下获取 ng-template 的索引

Question

我正在使用 primeng 轮播并尝试获取轮播在 3 秒间隔后显示的图像的索引。我被困在这里并尝试了不同的方法，但没有任何方法适合我。我该怎么做？

这是我的代码：

<p-carousel
[value]="carouselImages"
[style]="{ 'margin-top': '2em' }"
[numVisible]="1"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="3000"
>
<ng-template let-carouselImages let-i = "index" pTemplate="item">
  <div class="product-item">
    <div class="product-item-content">
      <div class="p-mb-3">
        <img
          [src]="carouselImages"
          alt="images to be displayed in carousel"
          class="product-image"
        />
      </div>
    </div>
    <h5>{{carouselHeadData[i]}}</h5>    //not working
    <p>{{carouselBodyData[i]}}</p>      //not working
  </div>
</ng-template>
</p-carousel>

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

一种方法是创建一个管道来查找传递的选项的索引基

@Pipe({
  name: 'indexOf'
})
export class IndexOfPipe implements PipeTransform {

  transform(items:any[] , item:any): any {
    return items.indexOf(item);
  }

}

现在您可以将管道放入 carousal 中，您将获得它的索引。

 <p-carousel
    [value]="carouselImages"
    [style]="{ 'margin-top': '2em' }"
    [numVisible]="1"
    [numScroll]="1"
    [circular]="true"
    [autoplayInterval]="3000"
    >
    <ng-template let-item pTemplate="item">
      <div class="product-item">
        <div class="product-item-content">
          <div class="p-mb-3">
            <img
              [src]="item"
              alt="images to be displayed in carousel"
              class="product-image"
            />
          </div>
        </div>
        <h5>{{carouselImages | indexOf:item}}</h5>
        <p>{{carouselImages | indexOf:item}}</p>
      </div>
    </ng-template>
    </p-carousel>

在没有 *ngFor 的情况下获取 ng-template 的索引

Get index of ng-template without *ngFor

primeng

angular