angular - 自定义内容下拉菜单在 PrimeNG 中不起作用？

Question

我正在实现自定义内容下拉菜单。工作不正常。它不设置 selectedTestType 值，它在 onChangeTestTypes 中给出 undefined 值。

<p-dropdown name="classTestTypeCombobox"
            [options]="TestTypes" [(ngModel)]="selectedTestType"
            [style]="{'width':'150px'}" filter="filter"
            [disabled]="this.isProdCodeDisabled"
            appendTo="body"
            required
            #classTestTypeCombobox="ngModel"
            (ngModelChange)="onChangeTestTypes($event)">
    <ng-template let-TestType pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <div>{{TestType.descLong}}</div>
        </div>
    </ng-template>
</p-dropdown>

TestTypes 是类对象的数组，它有以下成员。

id: number;
classificationCode: string;
descLong: string;
classificationParent: string;
codeType: number;

onChangeTestTypes(TestType) {
    this.selectedTestTypeDesc = this.TestTypes.filter(x => x.priceCode == TestType)[0].descLong;
    this.price.Type = this.TestTypes.filter(x => x.priceCode == TestType)[0].Type;
}

Answer 1

通过查看 PrimeNG SelectItem，我发现该值既是标签又是对象，因此在原始问题中，答案如下所示 {{TestType.value.descLong}}。我的完整解决方案是这样的:

<ng-template let-group pTemplate="item">
    <div style="width: 100%; display: flex;">
        <span style="width:30px;">{{group?.value.Code}}</span>
        <span style="width:60px;">{{group?.value.Description}}</span>
    </div>
</ng-template>