p-multiselect primeng angular 2 中的动态选项

Question

我正在尝试实现 primeng 的数据表。其中，我 创建了一个包含 header、字段和选项 的数组，即：headersList.

如下图：

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

我将此数组传递给 'p-column'，如下所示：

<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>

但它不起作用。我需要将 headersList 的 options 字段添加到 p-multiselect

的 options

Answer 1

问题是您没有将选项作为数组传递

此处，此字段：

options: "timeOptions"

应该看起来像

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

因此，更改后您的 json 应该类似于：

{
  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'}
            ]
}

根据对您问题的评论，如果这是您正在实施的代码

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

然后

这个options: "timeOptions"应该看起来像options: timeOptions（所有选项键没有双引号）

p-multiselect primeng angular 2 中的动态选项

dynamic options in p-multiselect primeng angular 2

angular

primeng

primeng-datatable