如何以反应形式修补多选下拉列表（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 数组转换为数字数组后的控制台 output

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[])，那么您也可以让 ngModel 成为一个字符串数组。 但是如果你的选项是一个对象数组，那么选项必须是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}
]

并想从中预先选择三个值，那么您必须提供一个相同类型的数组

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