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

Question

我使用下面的代码在 angular 2 中使用 prime-ng carousel 显示从模板标签内的 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" }]

Plunker：- https://plnkr.co/edit/PUOlAQ7abbAJ7el4ciQ2?p=preview

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

Answer 1

p-carousel没有在 carousel 元素上使用模板变量的选项。这适用于ngFor指令，因为ngFor指令 add(template as is) 或根据提供给它的集合从 DOM 中删除提供的模板。

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

让我们更深入地了解它是什么，正如你在template里面写的那样，p-carousel你必须对它进行正确的pTemplate="item"指令。这样就p-carousel收集pTemplate="item"了这行代码所具有的所有传递模板，并将这些所有模板附加到下面的代码段中ngFor，其中itemTemplate是我们传递的模板 & valueis 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>

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

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

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

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

演示在这里

如果您需要在外部组件中选择页面值，然后将事件放在(onPage)over 上p-carousel，每次更改轮播选择下拉列表时都会调用它。

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

预览

注意：考虑使用ng-template代替template，模板自 Angular 4 起已被弃用。