Angular中p-autoComplete值绑定问题：选中后显示[Object Object]

问题原因 #

p-autoComplete默认会把选中的对象直接转成字符串（调用Object.toString()），所以会显示[Object Object]——本质是组件不知道该展示对象里的哪个属性值。

解决方法 #

方法1：用field属性（最省心） #

直接在p-autoComplete标签上添加field属性，指定要显示的对象属性，比如你要展示公司名称name：

修改后的HTML代码：

<p-autoComplete id="dataCmpnyAuto" 
    name="dataCmpnyAuto" 
    [suggestions]="dataCmpnyAutoList" 
    (onKeyUp)="startSearch($event.target.value)"
    dropdownIcon="pi pi-angle-down" 
    (onSelect)="getCompanyList($event)"
    formControlName="dataCmpnyAuto"
    field="name"> <!-- 新增这一行 -->

    <ng-template let-i pTemplate="item">
       <div class="country-item">
         <h6>{{ i.name}}</h6>
         <div>{{ i.id}}</div>
       </div>
    </ng-template>
</p-autoComplete>

添加后，选中项时输入框会自动显示对象的name属性值。

方法2：自定义选中项模板（适合复杂显示需求） #

如果需要在输入框里展示更复杂的内容（比如同时显示id和name），可以添加pTemplate="selectedItem"模板：

修改后的HTML代码：

<p-autoComplete id="dataCmpnyAuto" 
    name="dataCmpnyAuto" 
    [suggestions]="dataCmpnyAutoList" 
    (onKeyUp)="startSearch($event.target.value)"
    dropdownIcon="pi pi-angle-down" 
    (onSelect)="getCompanyList($event)"
    formControlName="dataCmpnyAuto">

    <ng-template let-i pTemplate="item">
       <div class="country-item">
         <h6>{{ i.name}}</h6>
         <div>{{ i.id}}</div>
       </div>
    </ng-template>

    <!-- 新增选中项显示模板 -->
    <ng-template let-selected pTemplate="selectedItem">
        {{ selected.name }} ({{ selected.id }})
    </ng-template>
</p-autoComplete>

这种方式可以完全自定义输入框的显示格式。

额外提示 #

• 两种方法都不会影响formControl的存储值，组件会自动保留完整的选中对象，不影响后续业务逻辑。
• 确认dataCmpnyAutoList中的每个对象确实包含name和id属性，避免因属性名拼写错误导致显示异常。

内容的提问来源于stack exchange，提问作者Raghavi