将 angular 管道与 prime-ng 多选一起使用

Question

我有一个简单的多 select 下拉菜单，我想为 selection 区域和下拉选项应用小写管道。我尝试使用以下示例这样做 - 但它不起作用 - 只有下拉选项“接收”管道转换

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name">
<ng-template let-country pTemplate="item">
    <div class="country-item">
        <div>{{country.name | lowercase}}</div> // not working
    </div>
</ng-template>
<ng-template let-item pTemplate="country">

    <div>{{item.name | lowercase}}</div> // working

</ng-template>

可能与 optionLabel="name" 属性有关？

example

Answer 1

也许，此解决方案适合您（根据自己的风格设计）：

<h5>Basic</h5>
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name">
    <ng-template pTemplate="selectedItems">
        <div class="country-item" *ngFor="let country of selectedCities1">
            <div>{{country.name | lowercase}}</div>
        </div>
        <div *ngIf="!selectedCities1 || selectedCities1.length === 0" class="country-placeholder">
        Select a city
    </div>
    </ng-template>
    <ng-template let-item pTemplate="country">

        <div>{{item.name | lowercase}}</div>

    </ng-template>

</p-multiSelect>

将 angular 管道与 prime-ng 多选一起使用

Using angular pipes with prime-ng multiselect

primeng

angular