PrimeNG 下拉菜单 - 如何在一个选项标签中设置两个值

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。

.component.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 上的示例演示