我在模板中使用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 陣列轉換為數字陣列后的控制臺輸出
uj5u.com熱心網友回復：
從后端獲取資料后，使用原始陣列創建一個物件陣列，然后將這些值設定為 patchValue 方法。
const excludeDays = [1,2].map(id=>this.excludeDays.find(day=>day.value === id));
this.form.patchValue({
excludeDays: excludeDays
})
uj5u.com熱心網友回復：
Prime NG 多選 ( p-multiselect ) 要求ngModel屬性的資料型別與options屬性的資料型別相同。
這意味著，如果您的選項是字串陣列(string[])，那么您也可以讓 ngModel 成為字串陣列。但是，如果您的選項是物件陣列，則選項必須是物件陣列（物件必須是相同型別）。
例如，你有這個陣列系結到 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.
})
uj5u.com熱心網友回復：
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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/441661.html
標籤：javascript 有角度的 角反应形式 普门 启动下拉菜单