如何获取 ng-template 中 primeng 下拉列表的索引值

Question

我试图在 ng-template 中获取 primeng 下拉列表的索引值，但它给了我空值。这是示例代码

<p-dropdown [options]="cards" [(ngModel)]="selectedCard">
 <ng-template let-card let-i="index" pTemplate="item">
  <span>{{i}}</span>
 </ng-template>
</p-dropdown>

Answer 1

如果您检查primeng源代码，您会发现传递了传递选项的项目，因此没有有关索引的信息

 <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container>

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

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

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

}

例子

<p-dropdown [options]="cities" [(ngModel)]="selectedCountry" 
     optionLabel="name" [filter]="true" [showClear]="true"
    placeholder="Select a Country">

    <ng-template let-item pTemplate="item">

        <div>{{item.value.name}} {{cities | indexOf:item.value}} </div>

    </ng-template>
</p-dropdown>

演示