Angular 将当前迭代项分配给pTemplate内的ngModel="；标题“；？

如何在

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>

---

向列数组的每个项添加布尔

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

---

请参见

非常感谢您的帮助和宝贵的时间。

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