How to mark a checkbox of a Primeng datatable?

Question

How to mark a checkbox of a Primeng datatable?

Navigation

#1 by (1 votes)

0

I have this array of information this.userLanguage = response.lstLOV; that contains this data:

0:{languageId:"en",languageName:"English",seleccion:true},
1:{languageId:"es",languageName:"Español",seleccion:false}...

In my table I show them like this:

<p-dataTable [value]="userLanguage" name="userLang" dataKey="key">
 <p-column [style]="{'max-width':'300px'}" field="languageName" header="Nombre de Idioma"></p-column>
 <p-column [style]="{'max-width':'300px'}" field="languageId" header="Código"></p-column>
 <p-column field="seleccion" header="Estado">
  <ng-template let-col let-userLanguage="rowData" pTemplate="body">
   <p-checkbox name="seleccion" [ngModel]="userLanguage[col.field]" binary="true">
   </p-checkbox>
  </ng-template>
 </p-column>
</p-dataTable>

But you show me all in check, as if they were all activated

angular-datatables angular2-template angularjs-2.0

asked by Elberth Agreda 04.09.2017 в 22:28

source

1 answer

problem when uploading photo with jquery and php adding variables from a Java array

score 1 · Answer 1

The p-column component allows you to define custom content using ng-template.

<div>

      <p-dataTable [value]="personas">
        <p-column field="nombre" header="Nombre"></p-column>
        <p-column field="apellido" header="Apellido"></p-column>
        <p-column field="menor" header="Menor">
          <ng-template let-col let-persona="rowData" pTemplate="body">
            <p-checkbox [ngModel]="persona[col.field]"  binary="true">
            </p-checkbox>
          </ng-template>
        </p-column>
      </p-dataTable>
    </div>

The app.component.ts file

export class AppComponent {
  personas;

  constructor() {

    this.personas = [
      { nombre: 'Perona 1', apellido: 'Persona', menor: false },
      { nombre: 'Perona 2', apellido: 'Persona 2', menor: true },
      { nombre: 'Perona 3', apellido: 'Persona 3', menor: false },
      { nombre: 'Perona 4', apellido: 'Persona 4', menor: true },
      { nombre: 'Perona 5', apellido: 'Persona 5', menor: false }
    ];
  }

}