jeudi 7 janvier 2021

PrimeNG checkbox ngModel with object

I want to implement the functionality shown below,I want to use ngFor

enter image description here

environment:

Angular@11.0.5
primeng@11.0.0

html code:

<p-table [columns]="cols" [value]="layers">
  <ng-template pTemplate="body" let-layer let-columns="columns">
    <tr>
      <ng-container *ngFor="let col of columns">
        <td *ngIf="col.field == 'name'">
          <span></span>
        </td>
        <td *ngIf="col.field != 'name'" style="text-align:center">
          <p-checkbox [name]="col.field" [(ngModel)]="layer[col.field]"></p-checkbox>
          <!-- <input type="checkbox" name="" value="" [(ngModel)]="layer[col.field]"> -->
        </td>
      </ng-container>
    </tr>
  </ng-template>
</p-table>

ts code:

cols = [
  {label:'name',field:'name'},
  {label:'a',field:'a'},
  {label:'b',field:'b'},
  {label:'c',field:'c'},
  {label:'d',field:'d'},
]

layers = [
  {
    name:'x1',
    id:'1'
    a:true,
    b:true,
    c:false,
    d:false
  },
  {
    name:'x2',
    id:'2'
    a:false,
    b:true,
    c:false,
    d:true
  },
  {...}
]

error:

ERROR Error: Uncaught (in promise): TypeError: this.model.indexOf is not a function

when I not use checkbox of primeNG, just use <input type="checkbox" name="" value="" [(ngModel)]="layer[col.field]">,it working well.

how can I fix it? Please!




Aucun commentaire:

Enregistrer un commentaire