如果已通过 p-datatable 中的复选框选择了行，如何从按钮切换禁用属性

Question

我目前正在使用 angular6 开发 Web 应用程序的用户界面。我有一个包含多行的 p-dataTable 组件 (primeNG)，每一行的第一列都有一个复选框，最后一列默认为禁用按钮。

目标是在我 select 一行时打开一个对话框，方法是单击它的复选框，然后在无法使用该按钮（只有那个按钮，而不是其他行按钮）后单击它的对话框触发按钮。

我以为我可以通过 CSS 和 nth-child(index) 获取行 selected 索引并设置按钮样式，但我在 p-datatable 中读取 p-columns 没有创建一个索引。

这看起来很简单，但我无法只按下 selected 行的按钮。

非常感谢你的帮助。

这是一个简化的标记示例：

    <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">
        <p-header>
            <div class="ui-helper-clearfix">Example Table</div>
        </p-header>
        <p-column class="checkbox" selectionMode="multiple"></p-column>
        <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>
        <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>
        <p-column>
            <ng-template>
                <button type="button" class="btn" icon="fa fa-user" [disabled]="??????"></button>
            </ng-template>
        </p-column>
    </p-datatable>

提前致谢和问候！

Answer 1

我找到了解决方案：

首先，我需要在我的复选框 p 列中有一个 ng-template，以便通过在复选框的 onChange 事件中触发的函数在 class 组件中读取一个 rowIndex 变量。

我将这个值保存在一个名为 "indexSelected" 的 class 变量中，我将在按钮 p 列的 ng 模板中查看该变量。我会将此 rowIndex 值与 "indexSelected" 进行比较，以保持禁用或不禁用我的按钮。

这是我的代码：

模板：

   <p-datatable [value]="data" scrollable="true" scrollHeight="350px [(selection)]="selectedItems" columnResizeMode="expand">
    <p-header>
        <div class="ui-helper-clearfix">Example Table</div>
    </p-header>
    <p-column selectionMode="multiple" [styleClass]="'colsmall'">
        <ng-template let-riCheck="rowIndex" pTemplate="body">
            <p-checkbox  (onChange)="selectRow(riCheck); "></p-checkbox>
        </ng-template>
    </p-column>
    <p-column class="data-column" field="dataColumn1" header="Column1"></p-column>
    <p-column class="data-column" field="dataColumn2"header="Column2"></p-column>
    <p-column header="Acciones" styleClass="colmedium" frozen="true">
        <ng-template pTemplate="body" let-ri="rowIndex">
            <button type="button" pButton icon="fa-user" (click)="goToEditContact();" [disabled]="indexSelected != ri"></button>
            <button type="button" pButton icon="fa-ellipsis-h" class="ui-button-inverted" (click)="mostrarMasOpciones($event, op)" [disabled]="indexSelected != ri"></button>
        </ng-template>
    </p-column>
</p-datatable>

Class 分量：

...

selectRow (index) {
    this.indexSelected = index;
}

...

如果已通过 p-datatable 中的复选框选择了行，如何从按钮切换禁用属性

How to toggle disabled property from button if it's row has been selected by checkbox in a p-datatable

primeng

angular

primeng-datatable

如果已通过 p-datatable 中的复选框选择了行，如何从按钮切换禁用 属性

How to toggle disabled property from button if it's row has been selected by checkbox in a p-datatable

primeng

angular

primeng-datatable

如果已通过 p-datatable 中的复选框选择了行，如何从按钮切换禁用属性