Как переключить отключенное свойство из кнопки, если его строка была отмечена флажком в p-datatable - PullRequest
Новая
       11

Как переключить отключенное свойство из кнопки, если его строка была отмечена флажком в p-datatable

0 голосов
/ 24 ноября 2018

В настоящее время я разрабатываю пользовательский интерфейс веб-приложения с использованием angular6.У меня есть компонент p-dataTable (primeNG) с несколькими строками, каждая строка имеет в качестве первого столбца флажок и, как последний, по умолчанию отключенную кнопку.

Цель - открыть диалоговое окно, если я выберу строкущелкнув по этому флажку и затем нажав кнопку запуска диалогового окна после невозможности нажать эту кнопку (и только эту, а не остальные кнопки строк).

Я думал, что смогу получить индекс выбранной строки и стилизовать кнопку с помощью CSSс nth-child (индекс), но я читаю p-столбцы в p-datatable не создает индекс.

Это выглядит как-то тривиально, но я не могу просто нажать кнопкувыбранная строка.

Буду признателен за вашу помощь.

Это упрощенный пример разметки: 

    <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>

Заранее спасибо и привет!

1 Ответ

0 голосов
/ 27 ноября 2018

Я нашел решение:

Прежде всего мне нужен ng-шаблон внутри моего p-столбца флажка, чтобы иметь переменную rowIndex для чтения в компоненте класса через функцию, запускаемую всобытие onChange флажка.

Там я сохраняю это значение в переменной класса с именем "indexSelected", которую я буду наблюдать в ng-шаблоне p-столбца кнопок.Я буду сравнивать это значение 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;
}

...
...