如何使用 *ngFor 连接 Angular 中 p-dropdown 选项中 optionLabel 中的两个属性？

Question

我需要连接两个属性并将其显示在 Angular 的 p 下拉列表中的 optionLabel 中？我可以在 mat-select 中执行此操作，但不能在 p-dropdown 中执行此操作。

任何将以下 mat-select 代码转换为 p-dropdown 的帮助都将受到赞赏。

<label for="Pricing Office ID"> Pricing Office ID</label>
<mat-select type="text" class="custom-mat-select" name="pricingOfficeID" formControlName="pricingOfficeID (selectionChange)="changePricingOfficeID()">
<mat-option *ngFor="let office of worldAreaSpecifcOffices" [value]="office.referenceId"> {{office.referenceId}} - {{office.officeName}}
</mat-option>
</mat-select>

worldAreaSpecifcOffices 是包含referenceId 和OfficeName 属性的对象。我想连接这些属性并将其显示在 optionLabel 中。 ReferenceId 将映射到 optionValue。加载表单时，我会将值分配给控件。

Answer 1

您可以在

p-dropdown

元素内使用模板。 示例：

<p-dropdown [options]="worldAreaSpecifcOffices" formControlName="pricingOfficeID" optionLabel="name">
    <ng-template pTemplate="selectedItem">
        {{selectedOffice.referenceId}} - {{selectedOffice.officeName}}
    </ng-template>
    <ng-template let-office pTemplate="item">
        {{office.referenceId}} - {{office.officeName}}
    </ng-template>
</p-dropdown>