dynamic options in p-multiselect primeng angular 2

Question

I am trying to implement datatable of primeng. In which, I have created an array of header, field and options, i.e.: headersList.

It is as shown below:

{
  header: "Time",
  field: "time",
  options: "timeOptions"
}, {
  header: "Date",
  field: "date",
  options: "dateOptions"
}, {
  header: "Table No.",
  field: "table_no",
  options: "tableOptions"
}

I am passing this array to 'p-column' like this:

<p-column *ngFor="let head of headersList" [field]="head.field" [header]="head.header" [filter]="true" filterPlaceholder="search" filterMatchMode="in">
  <ng-template pTemplate="filter" let-col>
    <p-multiSelect [options]="head.options" defaultLabel="Search" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)"></p-multiSelect>
  </ng-template>
</p-column>

But it's not working. I need to add options field of headersList to options of p-multiselect

Answer 1

Issue is you are not passing options as array

Here , This field :

options: "timeOptions"

Should look like

options: [
            {label: 'White', value: 'White'},
            {label: 'White1', value: 'White1'}
         ]

So, After changes your json should look something like :

{
  header: "Time",
  field: "time",
  options: [
            {label: 'White', value: 'White'},
            {label: 'White1', value: 'White1'}
            ]
}, {
  header: "Date",
  field: "date",
  options: [
            {label: 'White', value: 'White'},
            {label: 'White1', value: 'White1'}
            ]
}, {
  header: "Table No.",
  field: "table_no",
  options: [
            {label: 'White', value: 'White'},
            {label: 'White1', value: 'White1'}
            ]
}

---

As per the comment on your question , If this is the code you are implementing

this.timeOptions.push({
    label: element.appointment_time,
    value: element.appointment_time
});
this.dateOptions.push({
    label: element.appointment_date,
    value: element.appointment_date
});

Then

this options: "timeOptions" should look like options: timeOptions (without double quotes for all options key)