获取不含*ngFor的ng-template的索引

Question

我正在使用primeng carousel并试图获得carousel在间隔3s后显示的图像的索引。我被困在这里，尝试了不同的方法，但没有一个对我有效。我该怎么做呢?

下面是我的代码:

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