如何在循环中更改值时禁用相应多选下拉列表的 primeng 多选下拉选项

Question

I am using primeng v6.x multiselect inside a table where data rendered dynamically in a loop.

My options array looks as follows:

let data = [
  { key: "ALL", desc: "All", disabled: false },
  { key: "PQR", desc: "Pqr", disabled: false },
  { key: "XYZ", desc: "Xyz", disabled: false }
];

I am passing the above array in [options]="data" . I have an add button, when click a new row will be added to the table.

Expected behavior: When select "ALL" option I am changing disabled property to true where it should disable remaining options only in that particular row's dropdown.

Issue: It disables all remaining options in all the table rows including original variable. Please suggest me the solution.

HTML:

<p-multiSelect [options]="data" (onChange)="changeEvent($event)" optionLabel="desc" dataKey="key" [formControl]="dataListControl"></p-multiSelect>

Yes, I am passing a common variable in options. Tried different ways like created new control when adding new row and bind the data into options (not sure if it is correct way), it updates original variable value also. Please suggest how to make optional value unique to specific row.

Answer 1

• if you are using formArray then it should've been working, can you please share your html and ts file, so I can check what's causing the problem, right now you only share the component and it's options, so it's hard to understand. It would be great if you create a stackblitz . thank you