PrimeNg/Angular: 如何显示选中项的标签？

Question

.html:

<p-listbox formControlName="userRole" 
           [options]="this.userRoleItems"   
           [(ngModel)]="selectedUserProfile.role" 
           multiple="multiple" 
           [style]='{"width":"250px"}' 
           checkbox="checkbox" filter="filter">
</p-listbox>

所选角色：

<span *ngFor="let c of selectedUserProfile.role" style="margin-right: 10px"> 
  {{c}}
</span>

.ts 文件：

userRoleItems: SelectItem[] = [
  { label:  'User Role 1', value: 1 }, 
  { label:  'User Role 2', value: 2 }, 
  { label:  'User Role 1', value: 3 }
];

但是我想在选择一个时显示标签而不是值

Answer 1

你可以试试这样：

const labels = userRoleItems.filter(ur => selectedUserProfile.role.indexOf(ur.value) !== 1);

然后您可以遍历标签数组并只打印标签字段。请注意，代码未经测试，因为我没有完整的示例

Answer 2

在你的*.component.ts中你可以定义一个方法：

labelByValue(value){
    let i =  this.userRoleItems.find(item => item.value == value);
    return i ? i.label : "";
  }

在你的 *.component.htm 中使用如下：

<span *ngFor="let c of selectedUserProfile.role" style="margin-right: 10px"> 
  {{labelByValue(c)}}
</span>

Plunkr demo

PrimeNg/Angular: 如何显示选中项的标签？

PrimeNg/Angular: How to display the label of a selected item?

angular

typescript

primeng