如何以反应形式修补多选下拉列表（primeng 组件）的值？

Question

我在模板中使用了 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 数组转换为数字数组后的控制台输出

Answer 1

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

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

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

Answer 2

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

这意味着，如果您的 options 是 string (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.
})

Answer 3

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

如何以反应形式修补多选下拉列表（primeng 组件）的值？

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

javascript

angular

angular-reactive-forms

primeng

primeng-dropdowns