TurboTable焦点错误/错误中的primeNg动态p复选框

Question

我在TurboTable（PrimeNg）中动态加载p复选框。一旦只有一列，只要有一列，我取消选中第一列的复选框，第二列中的复选框自动获得焦点并且未经检查，以及... <... / p>

component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { LpbCluster, LpbSessionService } from 'lpb-components/@lpb-components';
import { HrReductieRestService } from '../shared/services/rest/hr-reductie-rest.service';

@Component({
  selector: 'app-hr-reductie',
  templateUrl: './hr-reductie.component.html',
  styleUrls: ['./hr-reductie.component.scss']
})

export class HrReductieComponent implements OnInit, OnDestroy {

  private sub1$: Subscription;
  private cluster: LpbCluster;
  cols: any[];
  colsBtns: any[];
  colsCustom: any[];
  reductieLijst: any[];
  reducties: any;
  groepId: number;

  constructor(private lpbSessionService: LpbSessionService,
          private hrReductieRestService: HrReductieRestService) {
  }

  ngOnInit(): void {
    this.cluster = this.lpbSessionService.getSessionCluster();

    if (this.groepId !== undefined) {
      this.sub1$ = this.hrReductieRestService.getReductieLijst(this.cluster.id, this.groepId)
        .subscribe((data) => {
          this.reducties = data;
          this.generateTable(data);
          this.generateTabelData(data);
        });
    }
  }

  ngOnDestroy(): void {
  }

  generateTable(data) {
    // console.log(data);
    this.cols = [
      { field: 'naamNL', header: 'Reductie' }
    ];

    this.colsBtns = [
      { field: 'cluster', header: 'Cluster' }
    ];
    for (let i = 0; i < data.admins.length; i++)
      this.colsBtns.push(
        { field: 'admin' + '(' + i + ')', header: data.admins[i].naam }
      );
    this.colsCustom = [
      { field: 'custom', header: '' }
    ];
  }

  generateTabelData(data) {
    this.reductieLijst = data.lijst;
  }

    onSelectAll(event) {
    // console.log('select all: ',event);
    // console.log('reductielijst : ',this.reductieLijst);
  }


  saveForm(form) {
    this.reducties.lijst = [];
    this.reducties.lijst = form;

    this.cluster = this.lpbSessionService.getSessionCluster();
    this.hrReductieRestService.postReductieLijst(this.cluster.id, this.reducties)
     .subscribe((data) => {
        console.log(data);
      });
  }

}

component.html

    <form #reductieForm="ngForm" class="ui-g ui-fluid" (ngSubmit)="saveForm(reductieLijst)">

      <p-table [columns]="cols" [value]="reductieLijst">
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of cols">
              {{col.header}}
            </th>
            <th *ngFor="let col of colsBtns">
              <button pbutton type="button" style="width: 150px;" class="ui-button" (click)="onSelectAll($event)"> {{col.header}}</button>
            </th>
            <th *ngFor="let col of colsCustom">
              {{col.header}}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-reductieLijst>
          <tr>
            <td>
              {{reductieLijst.naamNL}}
            </td>
            <ng-template ngFor let-checkbox [ngForOf]="reductieLijst.checkboxes" let-i="index">
              <td class="checkBox_center">
                <p-checkbox [(ngModel)]="reductieLijst.checkboxes[i]" [binary]="true" [name]="reductieLijst.naamNL + '_' + i" (click)="onSelectAll($event)"></p-checkbox>
              </td>
            </ng-template>
          </tr>
        </ng-template>
      </p-table>

      <button pbutton style="width: 150px;" class="ui-button" type="submit">SAVE</button>
    </form>