angular - 如何在一个选项标签中设置两个值？在 Angular 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>

标签： angularprimengprimeng-dropdowns

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