How to display selected value from selectBox?

Issue

I want to show data, but it shows the number value of selected item, how can i fix that and show the value of selected item

TS code:

 listObjectif: any[]=[];
  selectedObjectif1: string[] = []; 

Selectobjectif() {
    this.ObjectifService.findAll().then((res)=>{
      this.listObjectif = res.map(function (obj:any) {
        return {
          value: obj.id,
          label: obj.libelle
        };
      });
    });
  } 

My HTML:

 <p-multiSelect [options]="listObjectif" [(ngModel)]="selectedObjectif1" [ngModelOptions]="{standalone: true}"
                         [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=5></p-multiSelect>
          <p>Selected Cities: {{selectedObjectif1}}</p>

Solution

In the component.html file, modify the p-multiselect definition in the following way,

<p-multiSelect [options]="listObjectif" [(ngModel)]="selectedObjectif1" optionLabel="label" optionValue="label" [ngModelOptions]="{standalone: true}" [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=5></p-multiSelect>

<p>{{selectedObjectif1 | json}}</p>

The option itself is bound to the model by default, therefore we use optionValue to customize the property to pass as the value instead.

For your reference please find a link to a working demo here

Edit: For earlier versions of PrimeNG,

You would need to modify the object passed in the options attribute, such that the value property of the object is an object itself containing id and name properties.

In the component.ts file, modify the selectObjectIf() method in the following way,

this.ObjectifService.findAll().then((res) => {
  this.listObjectif = res.map(function(obj: any) {
    return {
      value: {
        id: obj.id,
        name: obj.libelle
      },
      label: obj.libelle
    };
  });
});
}

So that the resulting listObjectif appears to be,

[{
    label: "",
    value: {
      id: ,
      name: ""
    }
  },
  ...
]

Such that properties label and value.name are equal.

Then in your component.html file, modify the definition of p-multiSelect in the following way,

<p-multiSelect [options]="listObjectif" [(ngModel)]="selectedObjectif1" [ngModelOptions]="{standalone: true}" [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=5 optionLabel="label"></p-multiSelect>

<ng-container *ngFor="let object of selectedObjectif1">
  <p>{{object.value.name}}</p>
</ng-container>

Answered By - thisdotutkarsh