Назначить текущий элемент итерации для ngModel внутри pTemplate = "header"? - PullRequest
Новая
       34

Назначить текущий элемент итерации для ngModel внутри pTemplate = "header"?

0 голосов
/ 15 мая 2018

Как назначить текущий элемент итерации для ngModel внутри pTemplate="header"?

Я пытаюсь добиться этого в пользовательском интерфейсе

  • Если установлены все флажки в столбце, флажок в заголовке также должен быть выбран.
  • Если какой-либо флажок в столбце снят, соответствующий флажок заголовка столбца должен быть снят.

UI

enter image description here

HTML 

<p-panel header='Table Layout and Cells Selection'>

    <p-dataTable [value]="rowColumnData" *ngIf="renderCells" [scrollable]="true" scrollHeight="500px" frozenWidth="100px" unfrozenWidth="1750px"
        [loading]="loading" loadingIcon="fa-spinner">

        <!-- First column -->
        <p-column [style]="{'width':'100px', 'background-color': 'rgb(235, 237, 240)', 'text-align': 'left'}" frozen="true">
            <ng-template pTemplate="header">
                <p-checkbox binary="true" label="All" [(ngModel)]="selectAll" (onChange)="selectAllCells($event)" *ngIf="renderCells"></p-checkbox>
            </ng-template>

            <ng-template let-row="rowData" pTemplate="body">
                <p-checkbox binary="true" label={{row.ordrow}} [(ngModel)]="row.rowSelectAll" (onChange)='rowCheckboxSelectEvent(row, $event)'
                    pTooltip='{{row.ordrow}} - {{row.rowlabel}}'></p-checkbox>
            </ng-template>
        </p-column>

        <!-- Reminaing columns-->
        <p-column *ngFor="let col of columns; let i=index" [field]="col" [header]="col.ordcol" [style]="{'width':'75px', 'text-align': 'center'}">
            <!-- Header checkbox -->
            <ng-template pTemplate="header">
                <p-checkbox binary="true" label={{col.ordcol}} [(ngModel)]="HOW_TO_MAP???" (onChange)='columnCheckboxSelectEvent(columns[i], $event)'
                    pTooltip={{col.collabel}}></p-checkbox>
            </ng-template>

            <!-- Cells checkboxes -->
            <ng-template let-row="rowData" pTemplate="body">
                <p-checkbox binary="true" [(ngModel)]="row.columns[i].selected" [disabled]="row.columns[i].disabled" [style]="{'backgroundColor':'grey'}"
                    (onChange)='cellsCheckboxEvent(i)' *ngIf="row.columns[i]"></p-checkbox>
            </ng-template>
        </p-column>

    </p-dataTable>
</p-panel>

JSON

enter image description here

TypeScript - модель 

    // Model for Row and columns

export class RowColumn {

    txstartdate: string;
    txenddate: string;
    reporttypecode: string;
    templatecode: string;
    tableversioncode: string;
    tableid: number;
    ordrow: string;
    rowlabel: string;
    iszaxisopen: string;
    ordzaxis: string;
    ordZLabel: string;

    // Array of columns
    columns: CellColumn[];
    selected: boolean;
    rowSelectAll: boolean;
    columnSelectAll2: boolean;  // I TRIED TO MAP THIS, BUT NOT WORKING !!
}

// Data point column
export class CellColumn {
    dvstartdate: string;
    dvenddate: string;
    disabled: string;
    ordcol: string;
    isrowkey: string;
    selected: boolean;
    collabel: string;

    // Array of Datapoint
    datapoints: Datapoint[];
    columnSelectAll: boolean;
}

export class Datapoint {
    trcid: number;
    datapointid: string;

    constructor(trcid: number, datapointid: string) {
        this.trcid = trcid;
        this.datapointid = datapointid;
    }
}

1 Ответ

0 голосов
/ 15 мая 2018

Добавьте логическое свойство allSelected для каждого элемента массива столбцов и присвойте им значение false .

Тогда вам просто нужно позвонить [(ngModel)]="col.allSelected" в своем HTML и обновлять его всякий раз, когда вы нажимаете флажок в ячейке. 

ngOnInit() {
  this.columns = [
    { field: 'col1', header: '010', allSelected: false },
    { field: 'col2', header: '020', allSelected: false },
    { field: 'col3', header: '030', allSelected: false },
    { field: 'col4', header: '040', allSelected: false }
  ];


}

cellsCheckboxEvent(field) {
  // retrieve column index
  let colIndex = this.columns.map(function (item) {
    return item.field;
  }).indexOf(field);

  // check if there is a false value in column 'field'
  let isFalsePresentInColumn = this.data.map(function (row) {
    return row[field];
  }).indexOf(false) === -1;

  // update value of column header checkbox
  this.columns[colIndex].allSelected = isFalsePresentInColumn;
}

См. StackBlitz

...