Primeng的'selectedItem'模板不起作用，它始终将所选值设置为在自动完成中设置的'field'属性

Question

基本上，我正在尝试将选定的项目模板用于PrimeNG的自动完成，但不起作用。在下面的代码中，我在"selectedItem"模板中指定以某种方式格式化值。我错过了什么吗？

<p-autoComplete [formControlName]="controlModel.id"
                                [forceSelection]="true"
                                [suggestions]="httpSearchResult"
                                field="Identifier"
                                (completeMethod)="searchFromUrl($event.query)"
                                (onSelect)="setSearchBoxValue()"
                                [dropdown]="true"
                                [placeholder]="'Select ' + controlModel.displayName"
                                [multiple]="controlModel.multiple">
                    <ng-template let-searchItem pTemplate="item">
                        <ng-container *ngIf="searchItem.DisplayLabel == '' && searchItem.Identifier != ''">
                            <div class="ui-helper-clearfix">
                                <div>{{searchItem.Identifier}}</div>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="searchItem.DisplayLabel != '' && searchItem.Identifier == ''">
                            <div class="ui-helper-clearfix">
                                <div>{{searchItem.DisplayLabel}}</div>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="searchItem.DisplayLabel != '' && searchItem.Identifier != ''">
                            <div class="ui-helper-clearfix">
                                <div>{{searchItem.Identifier}} - {{searchItem.DisplayLabel}}</div>
                            </div>
                        </ng-container>
                    </ng-template>
                    <ng-template let-searchItem pTemplate="selectedItem">
                        <div class="ui-helper-clearfix">
                            <div>{{searchItem.Identifier}} - {{searchItem.DisplayLabel}}</div>
                        </div>
                    </ng-template>
                </p-autoComplete>```

Answer 1

在线找到解决此问题的解决方法：https://github.com/primefaces/primeng/issues/2242#issuecomment-440684864

Answer 2

当您有一个模型类时，您可以定义其他自定义方法：

export class User {
  name: string;
  surname: string;
  userId: string;
  get fullName(): string {
    return this.name + ' ' + this.surname + ' (' + this.userId + ')';
  }
}

然后在"字段"属性中使用它：

<p-autoComplete [(ngModel)]="selecteduser" [suggestions]="users" field="fullName" (completeMethod)="searchForUser($event)"></p-autoComplete>