dimanche 12 août 2018

TurboTable with p-checkbox not working - PrimeNG

I developed a screen that has a TurboTable and one of the columns is checkbox. I made the TurboTable configuration as specified in the documentation but all checkboxes return marked when loading the data or do not appear at first, but if you click on the line the checkbox is displayed. Someone to instruct me to make when loading the data from the backend the checkboxes are loaded with the values marked or not, depending on the data loaded. Here are some facts:

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>

<!--    ## 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">
            
          </td>
          <td scope="row">
            
          </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">
                      
                  </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">
                      
                  </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;
  diaSelecionado: FuncionamentoEstabelecimento;

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

Model

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

}




Aucun commentaire:

Enregistrer un commentaire