Angular2 Data binding for Primeng autocomplete component

Question

Am using Angular2: 2.1.0 and Primeng: 1.0.0,
I want Autocomplete component to bind to my object's key and show object's value in UI.

Here the Object is,

[{
    "user_id": 101,
    "user_name": "John"
},
{
    "user_id": 101,
    "user_name": "Ganesh"
},
{
    "user_id": 101,
    "user_name": "Irfan"
}]

app.component.html

<p-autoComplete  [(ngModel)]="userId" placeholder="User Search..." field="user_name" [suggestions]="suggestionList"  (completeMethod)="userSearch($event)"></p-autoComplete>

Using field attribute in autocomplete i can show my object's value in UI screen, but the entire object is binded to userId
How can i make binding user_id of selected object to userId ?

Answer 1

I had the same issue and actually ended using a separate method to capture the value

captureId(event: any) {
    this.userId = event.user_id;
}

And the actual use

<p-autoComplete (onSelect)="captureId($event)" ...

Answer 2

@NTN-JAVA I have done this my using field property.

<p-autoComplete [(ngModel)]="userName" [suggestions]="filteredBrands" name="guestType"
(completeMethod)="filterBrands($event)" [size]="12" [minLength]="1" field="user_name" inputStyleClass="txt-box" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick($event)">
 </p-autoComplete>

  guestDetails =
    
    [{
        "user_id": 101,
        "user_name": "John"
    },
    {
        "user_id": 102,
        "user_name": "Ganesh"
    },
    {
        "user_id": 103,
        "user_name": "Irfan"
    }]

    **Javascript**
    
        handleDropdownClick() {
            this.filteredBrands = [];
            setTimeout(() => {
              this.filteredBrands = guestDetails;
              
            }, 100);
          }