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 + ')';
  }

}

然后在“field”属性中使用：

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

Primeng的“ selectedItem”模板无效，它始终将所选值设置为在“自动完成”中设置的“字段”属性

2 个答案: