PrimeNg 下拉菜单：如何将多个字段设置为选定文本答案

【问题标题】：PrimeNg dropdown : how to set multiple fieids as selected textPrimeNg 下拉菜单：如何将多个字段设置为选定文本
【发布时间】：2018-04-21 22:02:33
【问题描述】：

<p-autoComplete name="student" [(ngModel)]="student" [ngModelOptions]="{standalone: true}" field="firstName" [forceSelection]="false" [suggestions]="filteredStudents"
   (completeMethod)="filterStudents($event)" [size]="30" [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true">
   <ng-template let-student pTemplate="item">
     <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
       <div style="font-size:18px;float:none;margin:10px 10px 0 0">{{student.firstName+' '+student.lastName}}</div>
     </div>
   </ng-template>
</p-autoComplete>

这工作正常，但所选项目仅显示为名字。我需要将所选学生视为名字+''+姓氏，我必须做哪些更改才能达到预期的结果？提前谢谢..

【问题讨论】：

你检查我的答案了吗？
嗨 Anshuman，我已经检查了你的答案。感谢您的帮助，在将 -- onSelect(value) 更改为 onSelect($value) 并将选项更改为 $option 后，它按我的预期工作。您能否使用上述更改编辑您的答案，以便我可以将其标记为答案..？

标签： angular primeng

【解决方案1】：

由于primeng 不提供所需的功能。但是你可以在修改你的代码后实现它：

HTML

<p-autoComplete name="student" 
    [ngModel]="displayValue" <============= here
    [ngModelOptions]="{standalone: true}" 
    [forceSelection]="false" 
    [suggestions]="filteredStudents"
    (completeMethod)="filterStudents($event)" [size]="30" [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" 
    (onSelect)="onSelect($option)">
    <ng-template let-student pTemplate="item">
        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
            <div style="font-size:18px;float:none;margin:10px 10px 0 0">{{student.firstName+' '+student.lastName}}</div>
        </div>
    </ng-template>
</p-autoComplete>

这里我只使用了一种方式绑定。

组件

displayValue: string; 

onSelect($value) {
    this.student = $value;
    this.displayValue = this.student.firstName + ' ' + this.student.lastName;
}

工作堆栈闪电战：https://stackblitz.com/edit/angular-isg6ez

【讨论】：

嗨 Anshuman 感谢您的帮助，在将 --onSelect(value) 更改为 onSelect($value) 并将选项更改为 $option 后，它按我的预期工作。您能否使用上述更改编辑您的答案，以便我可以将其标记为答案..？