p-multiselect初等角度2中的動態選項

Question

我正在嘗試實現primeng的數據表。 在其中，我創建了一個標頭，字段和選項的數組 ，即：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的選項中

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 （所有選項鍵均無雙引號）