Question

如何将当前迭代项目分配给pTemplate="header"内的ngModel？

我想在UI上实现这个目标

如果选中了列中的所有复选框，则也应选中标题中的复选框。
如果未选中列中的任何复选框，则应取消选中相应的列标题复选框。

UI

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

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

Answer 1

为 columns 数组中的每个项添加一个布尔allSelected属性，并为其指定 false 值。

然后，您只需在HTML中调用[(ngModel)]="col.allSelected"，并在单击单元格中的复选框时更新它。

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

将当前迭代项分配给pTemplate =＆＃34; header＆＃34;中的ngModel？

1 个答案: