Angular 2：如何有条件地禁用或启用 PrimeNG PickList 中的添加和删除按钮答案

【问题标题】：Angular 2: How to conditionally Disable or Enable the Add and Remove Button in PrimeNG PickListAngular 2：如何有条件地禁用或启用 PrimeNG PickList 中的添加和删除按钮
【发布时间】：2017-08-02 13:56:37
【问题描述】：

我是 Angular 2 的新手，我正在使用 PrimeNG (https://www.primefaces.org/primeng/#/picklist) 的 pickList 实现双列表框。
我在 PrimeNG pickList 中列出了 3 列的表数据，其中包含 ADD 和 REMOVE 按钮。谁能让我知道如何在用户选择pickLIst中的任何数据之前先禁用ADD和REMOVE按钮？

场景：
我在 pickList 中有两个容器：Source 和 Target。

如果用户从 Source 容器中选择任何行或数据，则 REMOVE 按钮应该被禁用并且添加按钮应该被启用。
类似地，如果用户从目标容器中选择任何数据，则添加按钮应该被禁用，而 REMOVE 按钮应该被启用。
如果在源容器和目标容器中均未选择数据，则两者应禁用添加和删除按钮

这是我的代码：

 <p-pickList [source]="data['brandList']" [target]="data['modelList']" [responsive]="true"
                           dragdrop="true">
            <ng-template let-brandList pTemplate="item">
                <div style="position: relative;height: 29px;top: 7px;">
                    <table  style="margin: 5px;text-align: center;position: relative;bottom: 14px;font-size: 13px;right: 4px;">
                        <tr style="border-bottom: 1px solid #d3d5d8">
                            <td style="border-right: 1px solid #d3d5d8">
                                <span>{{brandList.productClass}}</span>

                            </td>
                            <td style="border-right: 1px solid #d3d5d8">
                                <span title="{{brandList.model}}" style="display: inline-block;width: 69px;white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis;top: 3px;position: relative;">{{brandList.model}}</span>

                            </td>
                            <td style="border-right: 1px solid #d3d5d8">
                                <span>{{(brandList.brand).trim()}}</span>

                            </td>
                        </tr>

                    </table>

                </div>

            </ng-template>

        </p-pickList>

谁能建议我一些解决方案如何在 PrimeNG pickList 中实现这一点？

【问题讨论】：

标签： javascript angular typescript primeng

【解决方案1】：

你可以像下面这样。

document.getElementsByClassName('ui-picklist-buttons')[0].getElementsByClassName('ui-picklist-buttons-cell')[0]
        .getElementsByTagName('button')[0].setAttribute('disabled', 'disabled');

但这不是禁用的正确方法;-)

【讨论】：