Отключить динамически созданный раскрывающийся список множественного выбора (с помощью плагина) в angular
Я добавил раскрывающийся список с множественным выбором для каждой строки данных таблицы, с помощью которого пользователь может изменить выбор и сохранить его.
Настройки раскрывающегося списка множественного выбора в файле ts (typescript).
Теперь я хочу отключить раскрывающийся список в некоторых строках на основе некоторых пользовательских условий. Но изменение настроек (отключить свойство на true) отключает все раскрывающиеся списки в таблице.
Я использую и следую следующему примеру git. https://cuppalabs.github.io/angular2-multiselect-dropdown/#/disablemode
Пример html-кода, который я использовал
<tr *ngFor = "let item of items;>
<td> {{item.name}} </td>
<td>
<angular2-multiselect [data] = "dataArray" [settings] = "dropdownSettings"></angular2-multiselect>
</td>
</tr>
Пример настроек (в машинописном файле)
this.dropdownSettings = {
singleSelection: true,
primaryKey: 'dataId',
labelKey: 'dataName',
text: "Select a value",
enableSearchFilter: true,
lazyLoading: true,
showCheckbox: true,
clearAll: false,
disabled:false
};
раскрывающийся список является динамическим, так как я не знаю, сколько элементов управления там будет.
как вы решаете, отключен ли каждый элемент или нет?
Над таблицей будет установлен флажок, чтобы отключить раскрывающийся список со значением Afternoon (его значение id/key равно 1)
Ответы 1
Что вы можете сделать, так это создать уникальный объект настроек для каждого элемента в вашем шаблоне:
<tr *ngFor = "let item of items;>
<td> {{item.name}} </td>
<td>
<angular2-multiselect [data] = "dataArray" [settings] = "getDropdownSettings(item)"></angular2-multiselect>
</td>
</tr>
а затем в вашем компоненте:
getDropdownSettings(item) {
const isDisabled = true; // change to the logic you want here, like item.id === 1;
return {
...this.dropdownSettings,
disabled: isDisabled,
};
}
этот код создает новый (уникальный) объект настроек для каждого элемента в вашем ngFor
ваш объект настроек должен быть в раскрывающемся списке, чтобы это работало, а затем вы можете изменить отключенное свойство в соответствии с любым условием, которое вы хотите. Вам нужно будет предоставить больше кода для более конкретного ответа