Multiselect display items and selected items (p-multiselect)

Question

I am having issues displaying the currently selected items (always returns blank) - most likely I am not iterating over the object properly. Although, unsure on the best approach to this. All I want is for all the options to be displayed in the multi-select and also the currently selected items (e.g. from database).

Component:

orders: any[] = [];

this.orderDetailService.getAllOrders().subscribe((orders) => {
  this.orders = orders;
});


private fetchOrderDetailData() {
  if (this.orderDetailId !== undefined) {
    this.orderDetailService.getOrderDetailById(this.orderDetailId).subscribe((orderDetail) => {
      console.log(orderDetail.DetailCategories);
      this.orderDetail = orderDetail;
    });
  } else {
    // Handle the case where this.order.OrderDetail?.Id is undefined
    console.error('OrderDetail Id is undefined');
  }
}

HTML:

<div>
    <p-multiSelect [options]="categories" [(ngModel)]="selectedCategories" defaultLabel="Select a Category" optionLabel="Name"
        display="chip"></p-multiSelect>
</div>

Currently:

• Able to display all options
• DOES NOT show the currently selected items (Which I want)
• Eventually I will need to add/remove these

The console.log(orderDetail.DetailCategories); is the one that displays the currently selected items and is an array of objects. Array [ {…}, {…} ]. Also the Category.Name is what I put as the option.Label but for the above array it is called CategoryName (so can't reference Name for that one)

Edit 1

Replicated behaviour:

https://primeng-multiselect-demo-cjrvx6.stackblitz.io

Note that:

• I already have one City which doesn't display by default on the multiselect. If I then chose an option you can see the selected value except it is empty.

• Also note that I have a different naming convention between cities and selected cities

What I want is to show all the selectedCities by default alongside all the other options (as a chip in the multiselect). Of course with the CityName. I will have functionality to add/remove these

Reason for different names is my project has a many to many relationship with

• Categories Entity for listing those options
• OrderCategories Junction table to combine the two
• Order Entity containing a collection of all entries from the junction table

Answer 1

If you have different data types in selected items and the list of available options, you can use optionValue to make a property of the list as the ID, and in the [(ngModel)], you can pass an array of those IDs.

<!-- template -->
<p-multiSelect [options]="cities" 
    [(ngModel)]="selectedCities" 
    defaultLabel="Select a City" 
    optionLabel="CityName"
    optionValue="CityCode" 
    display="chip">

// component
cities = [
    { CityName: 'New York', CityCode: 'NY' },
    { CityName: 'Rome', CityCode: 'RM' },
    { CityName: 'London', CityCode: 'LDN' },
    { CityName: 'Istanbul', CityCode: 'IST' },
    { CityName: 'Paris', CityCode: 'PRS' },
];
selectedCities = ['NY', 'RM'];

Example: https://stackblitz.com/edit/primeng-multiselect-demo-nnashy?file=src%2Fapp%2Fapp.component.html