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

Question

我是 Angular 2 的新手，我正在使用 PrimeNG (https://www.primefaces.org/primeng/#/picklist) 的 pickList 实现双列表框。
我在带有添加和删除按钮的 PrimeNG pickList 中列出了 3 列的 table 数据。谁能告诉我如何在用户选择 pickLIst 中的任何数据之前首先禁用 ADD 和 REMOVE 按钮？

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

如果用户从源容器中选择任何行或数据，则删除按钮应该被禁用，ADD 按钮应该被启用。
类似地，如果用户从目标容器中选择任何数据，则添加按钮应该被禁用，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 中实现这一点的解决方案？

Answer 1

你可以像下面那样做。

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

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

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

Angular 2: How to conditionally Disable or Enable the Add and Remove Button in PrimeNG PickList

javascript

angular

typescript

primeng