PrimeNG Dropdown - 如何在一个选项标签中设置两个值

Question

我想在一个标签中设置两个值。例如，如果我打开下拉菜单，它应该显示为：

“值1 值2”

与空格连成一行。

value1

和

value2

数据正在从数据库中获取。我尝试使用以下方法，但没有成功。

<p-dropdown [options]="divitionArr" name="business_divition" [(ngModel)]="project.business_divition" optionLabel="{'first_name','last_name'}" optionValue="divition" #diviSel="ngModel"></p-dropdown>

Answer 1

建议将新字段

displayLabel

添加到用于

optionLabel

的数组元素中。接下来，您决定

displayLabel

所需的输出。

.组件.ts

ngOnInit() {
  this.divitionArr = this.divitionArr.map((divition: any) => {
    return {
      ...divition,
      displayLabel: divition.first_name + ' ' + divition.last_name
    };
  });
}

.component.html

<p-dropdown
  [options]="divitionArr"
  name="business_divition"
  [(ngModel)]="project.business_divition"
  optionLabel="displayLabel"
  optionValue="divition"
  #diviSel="ngModel"
>
</p-dropdown>

StackBlitz 上的示例演示

Answer 2

尝试像这样使用

<ng-template>

：

<label for="operatingSystem">Operating System</label>
<p-dropdown id="operatingSystem" [options]="operatingSystems" [(ngModel)]="application.operatingSystem"
            placeholder="Select an Operating System"  [showClear]="true">
  <ng-template let-operatingSystems pTemplate="item">
    <div class="flex align-items-center operatingSystems-item">
      <div>{{operatingSystems.name}} {{operatingSystems.version}}</div>
    </div>
  </ng-template>
</p-dropdown>