时间戳

首页 > 解决方案 > 禁用角度动态创建的多选（使用插件）下拉菜单

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>

示例设置（在 typescriptfile 中）

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

每行的下拉菜单

标签： angular

解决方案

您可以做的是在您的模板中为每个项目创建一个唯一的设置对象：

<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 中的每个项目创建一个新的（唯一的）设置对象

推荐阅读