Question

我目前正在使用angular6开发Web应用程序的用户界面。我有一个带有几行的p-dataTable组件（primeNG），默认情况下，每一行的第一列都有一个复选框，最后一个是默认禁用的按钮。

目标是打开一个对话框，如果我通过单击它的复选框来选择一行，然后在无法单击该按钮（以及那个按钮，而不是其余的行按钮）之后单击它的对话框触发按钮。

我以为我可以选择行的索引并使用nth-child（index）通过CSS设置按钮的样式，但是我读取p数据表中的p列不会创建索引。

看起来有些琐碎，但我无法仅选择所选行中的按钮。

感谢您的帮助。

这是简化的标记示例：

    <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事件触发的函数在类组件中读取rowIndex变量。

我在那里将该值保存在名为“ indexSelected”的类变量中，该变量将在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>

类组件：

...

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

...

如果已通过p数据表中的复选框选中行，如何从按钮切换禁用的属性

1 个答案: