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

What should be in options? An object with settings? If so could you please provide an example of such setting object? Cause now you're passing just a string. Maybe of course you have this setting objects in your controller. Need to see at that code. — Iaroslav, Jan 18 '18 at 04:35
I have added JSON data to the options: `this.timeOptions.push({ label: element.appointment_time, value: element.appointment_time }); this.dateOptions.push({ label: element.appointment_date, value: element.appointment_date });` — Sargam Sanghani, Jan 18 '18 at 04:45

Vivek Doshi · Accepted Answer · 2018-01-18T06:34:12.547

0

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)

edited Jan 18 '18 at 06:34

answered Jan 18 '18 at 05:00

Vivek Doshi

56,649
12
110
122

It is showing an error: **Error trying to diff '{ label: 'White', value: 'White' }'. Only arrays and iterables are allowed** – Sargam Sanghani Jan 18 '18 at 05:05
Try to use this example with your options. It's just an example. – Iaroslav Jan 18 '18 at 05:07
@SargamSanghani, issue was coz of same value in select , try now – Vivek Doshi Jan 18 '18 at 05:09
Could you please update your question with new code that you changed? We would like to see how you're applying it. – Iaroslav Jan 18 '18 at 05:18
@SargamSanghani , will you please create a demo on stackblitz ? – Vivek Doshi Jan 18 '18 at 05:19
@SargamSanghani, please check updated answer last block – Vivek Doshi Jan 18 '18 at 06:34
Thank u for your precious time.. @VivekDoshi – Sargam Sanghani Jan 18 '18 at 08:17

dynamic options in p-multiselect primeng angular 2

1 Answers1