用于自动完成的 PrimeNG patchValue

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

(for field="name" dataKey="id" the value is the same, so 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
        });

******************************************更新***** ****************************************************** ********** 成功了，方法如下

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

Answer 1

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

PrimeNG 文档：

字段

Field of a suggested object to resolve and display.

dataKey

A property to uniquely identify a value in options.

如果您的列表如下所示：

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

那么属性'field'应该指'name'，'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

PrimeNG patchValue for autocomplete

primeng

angular

primeng-dropdowns