p-multiselect primeng angular 2 中的动态选项
dynamic options in p-multiselect primeng angular 2
我正在尝试实现 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
问题是您没有将选项作为数组传递
此处,此字段:
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
(所有选项键没有双引号)
我正在尝试实现 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问题是您没有将选项作为数组传递
此处,此字段:
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
(所有选项键没有双引号)