如何以反应形式修补多选下拉列表(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 属性 的数据类型与选项 属性.
这意味着,如果您的 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.
})
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 组件。 我可以选择编辑显示现有字段值的表单。我无法修补多选下拉列表的值。
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 属性 的数据类型与选项 属性.
这意味着,如果您的 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.
})
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);