如何以反应形式修补多选下拉列表(primeng 组件)的值?

How to patch the value of multiselect dropdown (primeng component) in a reactive form?

我在模板中使用了 primeng 组件。 我可以选择编辑显示现有字段值的表单。我无法修补多选下拉列表的值。

excludeDays = [      
    {label: 'Mon', value: 1},
    {label: 'Tue', value: 2},
    {label: 'Wed', value: 3},
    {label: 'Thu', value: 4},
    {label: 'Fri', value: 5},
    {label: 'Sat', value: 6},
    {label: 'Sun', value: 7},
  ]

我将后端数据作为字符串输入,然后将其转换为数字数组,例如

[1,2] or[2,3,4]

现在,在我按下编辑按钮后,我希望选择下拉列表的值,因为上面有 excludeDays 值。

<div class="col-12" style="width: auto;" >
      <p-multiSelect [options]="excludeDays" optionLabel="label" defaultLabel="Select day" formControlName="excludeDays"></p-multiSelect> 
</div>

我正在使用

this.form.patchValue({
... : ....
excludeDays: converted array of (excludeDays) to number array
})

这是将 excludeDays 数组转换为数字数组后的控制台输出

从后端获取数据后,使用原始数组创建对象数组,然后将这些值设置到 patchValue 方法。

const excludeDays = [1,2].map(id=>this.excludeDays.find(day=>day.value === id));

this.form.patchValue({
excludeDays: excludeDays
})

Prime NG multiselect (p-multiselect) 期望 ngModel 属性 的数据类型与选项 属性.

这意味着,如果您的 optionsstring (string[]) 的数组,那么您可以将 ngModel 设为 字符串数组。但是,如果您的选项是 objects 的数组,则选项必须是 object 的数组(对象必须是同一类型)。

因此,例如,您将此数组绑定到 p-multiselect

excludeDays = [      
{label: 'Mon', value: 1},
{label: 'Tue', value: 2},
{label: 'Wed', value: 3},
{label: 'Thu', value: 4},
{label: 'Fri', value: 5},
{label: 'Sat', value: 6},
{label: 'Sun', value: 7}
]

并想从中 pre-select 三个值,那么你必须提供一个相同类型的数组,例如

selectedDays = [
{label: 'Mon', value: 1},
{label: 'Tue', value: 2}
];

您的模板将如下所示

<p-multiSelect  [options]="excludeDays" [(ngModel)]="selectedDays"  defaultLabel="Select a day" optionLabel="label"></p-multiSelect>

解释完之后,您需要在 patchValue 方法中使用完全相同的对象数组,而不是数字数组。

this.form.patchValue({
... : ....
excludeDays: excludeDays //instead of array of numbers you should have same array of objects.
})
let datafromBackend = [1, 2];

let UpdateSelection = [];
this.excludeDays.forEach((item) => {
  if (datafromBackend.findIndex((x) => x === item.value) > -1) {
    UpdateSelection.push(item);
  }
});

this.profileForm.get('excludeDays').setValue(UpdateSelection);