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

在* .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

Answer 2

你可以尝试这样的事情：

Context

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