如何从 Angular2 中的 prime-ng 轮播中的模板获取索引？

Question

我使用下面的代码在 angular 2 中使用 prime-ng 轮播显示从 excel 模板标签内上传的数据。

exceldata.html:-

<p-carousel headerText="Category" [value]="ExcelRowDatas" class="pcaro">
   <template ngFor let-ExcelRowData [ngForOf]="ExcelRowDatas" let-i="index" pTemplate="item">
       <div class="ui-grid ui-grid-responsive">
          <div class="ui-grid-row">
             <div class="ui-grid-col-6">Index No.</div>
             <div class="ui-grid-col-6">({{i}})</div>
          </div>
          <div class="ui-grid-row">
             <div class="ui-grid-col-6">Place</div>
             <div class="ui-grid-col-6">{{ExcelRowData['Place']}}</div>
          </div>           
       </div>
   </template>
</p-carousel>

exceldata.ts:-

let ExcelRowDatas = [{"Place": "New York"}, {"Place": "London"}, {"Place": "Paris" }]

笨蛋:- https://plnkr.co/edit/PUOlAQ7abbAJ7el4ciQ2?p=preview

我无法获取 ng-carousel 中模板标签内行的索引。但是我能够在不使用 ng-carousel 的情况下在模板中获取索引。如何使用模板获取 ng-carousel 中的索引值？

Answer 1

p-carousel 没有在轮播元素上使用模板变量的选项。这适用于 ngFor 指令，因为 ngFor 指令添加（模板原样）或根据提供给它的集合从 DOM 中删除提供的模板。

但是 p-carousel 的工作方式是，它将 templateRef 作为参数传递给 Component & 组件负责将 templateRef 绑定到特定的。

让我们更深入地了解它是什么，正如您在 p-carousel 中写的 template 一样，您必须在其上设置正确的 pTemplate="item" 指令。因此 p-carousel 通过 this line 的代码收集所有具有 pTemplate="item" 的 pass 模板，并将所有模板附加到下面的代码片段 ngFor，其中 itemTemplate 是模板我们路过 & value 是 ExcelRowDatas.

<li *ngFor="let item of value" class="ui-carousel-item ui-widget-content ui-corner-all">
    <ng-template [pTemplateWrapper]="itemTemplate" [item]="item"></ng-template>
</li>

这就是为什么即使我们将值作为模板变量传递，这些值也会被忽略的原因。简短的回答是你不能 pass/use 自定义模板变量到 p-carousel 模板。

可以有多种解决方案来解决这个问题。如果您只对元素的 index 感兴趣。您可以在 ExcelRowDatas 中手动添加新的属性 index

this.ExcelRowDatas.forEach(
  (item, index) => item.index = index + 1
)

然后您可以直接在模板上使用该值 {{item.index}}

Demo Here

如果您需要在外部组件中 selected 页面值，则将事件放在 (onPage) 上而不是 p-carousel，每次更改轮播时都会调用它 select下拉菜单。

<p-carousel [value]="jsonStr" class="pcaro" (onPage)="setPage($event)">
  <ng-template ngFor let-json [ngForOf]="jsonStr" let-i="index" pTemplate="item">
    ...
  </ng-template>
</p-carousel>

代码

page: any;
setPage(page){
    this.page = page;
}

Preview

Note: Consider using ng-template instead of template, template has been deprecated since Angular 4.

如何从 Angular2 中的 prime-ng 轮播中的模板获取索引？

How to get index from template inside prime-ng carousel in Angular2?

angular

angular2-template

primeng