Question

我正在尝试动态分配一个值以自动完成，但它不起作用

HTML

<label for="centerId" class="control-label">Center</label>
                                    <p-autoComplete formControlName="center" id="centerId"  [suggestions]="iCenter" placeholder="Center (required)" (completeMethod)="searchCC($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

界面

export interface ICenter{

   id: string,
   name: string
}

ts

（对于field =“ name” dataKey =“ id”，该值是相同的，因此id = name）

iCenter: ICenter[];

also confirmed there is a value 
console.log(this.center)
    searchCC(event) {

    this.iCenter = this.iCenter
        .filter(data => data.name.toString()
            .toLowerCase()
            .indexOf(event.query.toString().toLowerCase()) !== -1);

}
 this.ersaForm = this._fb.group({
        center: ['', Validators.required],
    });

 this.ersaForm.patchValue({

            //also tried  center:center
          //also tried center: [itimData.center, itimData.center],
            center: [{ 'field': this.center,'dataKey': this.center}],
            phone: itimData.phone,
            email: itimData.email
        });

***************************************更新******* ****************************************************** ******** 正常工作，这就是方法

center：{id：itimData.center，名称：itimData.center}，

Answer 1

属性'field'和'dataKey'不一定是对象的一部分。

PrimeNG文档：

字段

要解析和显示的建议对象的字段。

数据密钥

用于唯一标识选项中值的属性。

如果您的列表如下：

const items = [
    {id: 1, name: 'Apple'}, 
    {id: 2, name: 'Banana'}, 
    {id: 3, name: 'Pineapple'}
];

然后，属性“字段”应引用“名称” ，而“ dataKey”则引用“ id” 。

现在，如果要将自动完成功能的值设置为“ Pineapple”，则patchValue如下所示。

this.form.patchValue({
    item: {
        id: 3, // mandatory
        name: 'Pineapple' // optional
    }
});

PrimeNG组件将搜索id等于3的对象。当存在匹配项时，他会将所选内容设置为该对象。

https://www.primefaces.org/primeng/#/autocomplete

PrimeNG patchValue用于自动完成

1 个答案: