使用带prime-ng多选的角度管道答案

【问题标题】：Using angular pipes with prime-ng multiselect使用带prime-ng多选的角度管道
【发布时间】：2021-07-27 14:37:20
【问题描述】：

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

<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

【问题讨论】：

标签： angular primeng

【解决方案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>

【讨论】：