Блог

Главная - Вопросы по программированию - Отключить динамически созданный выпадающий список multiselect (с использованием плагина) в angular

Отключить динамически созданный выпадающий список multiselect (с использованием плагина) в angular

#angular

#angular

Вопрос:

Я добавил выпадающий список multiselect к каждой строке данных таблицы, с помощью которого пользователь может изменить выделение и сохранить его.

Настройки выпадающего списка множественного выбора в файле 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>

Пример настроек (в typescriptfile)

 this.dropdownSettings = {
        singleSelection: true,
        primaryKey: 'dataId',
        labelKey: 'dataName',
        text: "Select a value",
        enableSearchFilter: true,
        lazyLoading: true,
        showCheckbox: true,
        clearAll: false,
        disabled:false
    };

Выпадающий список в каждой строке

Комментарии:

1. чтобы это работало, ваш объект настроек должен быть в выпадающем списке, а затем вы можете изменить свойство disabled в соответствии с любым условием, которое вы хотите. Вам нужно будет предоставить больше кода для более конкретного ответа

2. выпадающий список является динамическим, так как я не знаю, сколько элементов управления будет там.

3. как вы решаете, отключен ли каждый элемент или нет?

4. Над таблицей будет установлен флажок, чтобы отключить выпадающий список со значением 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