如何在Angular PrimeNG中将两个值设置为一个optionLabel？

Question

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

"value1 value2"

在一行上用空格分隔。value1和value2数据来自数据库。我尝试使用以下方法，但它没有起作用。

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

- user16558324

Answer 1

建议在用于选项标签的数组元素中添加一个新字段 displayLabel。然后，您可以决定 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上的示例演示

- Yong Shun

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>**strong text**

- Reda