Question

我开发了一个带有TurboTable的屏幕，其中一列是复选框。我按照文档中的说明进行了TurboTable配置，但是在加载数据时所有复选框都被标记为返回标记，或者一开始没有出现，但是如果单击该行，则会显示该复选框。有人指导我从后端加载数据时要使复选框加载有标记的值或不标记的值，具体取决于加载的数据。以下是一些事实：

HTML

<p-table [value]="dias" [responsive]="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th class="col-codigo" scope="col">Aberto?</th>
            <th class="col-codigo" scope="col">Código</th>
            <th scope="col">Dia Semana</th>
            <th scope="col">Hora Abertura</th>
            <th scope="col">Hora Fechamento</th>
        </tr>
    </ng-template>

<!--    ## TODO: TEST
<p-cellEditor>
                    <ng-template pTemplate="input">
                      <p-checkbox [(ngModel)]="dia.opt_Funcionamento"
                        [binary]="true" name="funcionamento" (onclick)="!dia.opt_Funcionamento"
                        [value]="dia.opt_Funcionamento"></p-checkbox>
                    </ng-template>
                    <ng-template pTemplate="output">
                        <p-checkbox [binary]="true" [value]="dia.opt_Funcionamento" [(ngModel)]="dia.opt_Funcionamento"
                        name="funcionamentoDia"></p-checkbox>
                    </ng-template>
                </p-cellEditor>
        -->


    <ng-template pTemplate="body" let-dia>
        <tr>
            <td>
                  <p-checkbox [(ngModel)]="dia.opt_Funcionamento" [value]="dia.opt_Funcionamento"
                    binary="false" name="funcionamento" (onclick)="!dia.opt_Funcionamento"></p-checkbox>
                    </td>
          <td scope="row">
            {{dia.cd_Funcionamento}}
          </td>
          <td scope="row">
            {{dia.dia}}
          </td>
          <td pEditableColumn scope="row">
              <p-cellEditor>
                  <ng-template pTemplate="input">
                      <p-calendar [(ngModel)]="dia.hr_Abertura" [timeOnly]="true" name="horaAbertura" [showSeconds]="true" dataType="string"></p-calendar>
                  </ng-template>
                  <ng-template pTemplate="output">
                      {{dia.hr_Abertura}}
                  </ng-template>
              </p-cellEditor>
          </td>
          <td pEditableColumn scope="row">
              <p-cellEditor>
                  <ng-template pTemplate="input">
                      <p-calendar [(ngModel)]="dia.hr_Fechamento" [timeOnly]="true" name="horaFechamento" [showSeconds]="true" dataType="string"></p-calendar>
                  </ng-template>
                  <ng-template pTemplate="output">
                      {{dia.hr_Fechamento}}
                  </ng-template>
              </p-cellEditor>
          </td>
      </tr>
    </ng-template>
  </p-table>

Component.ts

export class FuncionamentoEstabelecimentoCadastroComponent {
  @Input () displayValue: string;
  funcionamentoEstabelecimento = new FuncionamentoEstabelecimento();
  dias: FuncionamentoEstabelecimento[];
  aberto = false; //TEST
  diaSelecionado: FuncionamentoEstabelecimento; //TEST

  constructor(
    ...
  ) { }

  ngOnInit() {
    this.tituloPagina.setTitle('Dias de funcionamento do estabelecimento');
    const codigoFuncionamento = this.rota.snapshot.params['codigo'];
    this.carregaDiasFuncionamento();
}

carregaDiasFuncionamento() {
    this.funcionamentoService.carregaDiasFuncionamento()
      .then(funcionamentoDados => {
        this.dias = funcionamentoDados;
      })
      .catch(erro => this.errorHandler.handle(erro));
  }

模型

export class FuncionamentoEstabelecimento {
  cd_Funcionamento: number;
  dia: string;
  opt_Funcionamento = false;
  hr_Abertura: Time;
  hr_Fechamento: Time;

}

编辑：

我能够解决问题。我用“ span”作为解决方案。追踪：

<td style="text-align: center" scope="row">
            <span *ngIf="rowData.opt_Funcionamento">
                <p-selectButton [options]="aberto" [(ngModel)]="rowData.opt_Funcionamento"
                  (onOptionClick)="!rowData.opt_Funcionamento" name="diaAberto"
                  pTooltip="Aberto" tooltipPosition="top"></p-selectButton>
            </span>
            <span *ngIf="!rowData.opt_Funcionamento">
                <p-selectButton [options]="aberto" [(ngModel)]="rowData.opt_Funcionamento"
                (onOptionClick)="rowData.opt_Funcionamento" name="diaFechado"
                pTooltip="Fechado" tooltipPosition="top"></p-selectButton>
            </span> </td>

Answer 1

您必须在复选框之间使用不同的名称，否则它将不起作用。

TypeScript：

concatName(name: string, id: string) {   
    return name.concat(StringUtils.DASH).concat(id);
}

HTML：

<p-checkbox  [name]="concatName('validationRadiation',authorisation.id)">

带有p-checkbox的TurboTable不起作用-PrimeNG

1 个答案: