jeudi 23 août 2018

Having dificulties with checkboxes

Can someone tell me what I'm doing wrong?

(Angular 6)

I have below my table, where, in the thead, there is a master checkbox, which, if clicked, selects all the checkboxes in the table.

 <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                <thead>
                    <tr>
                        <th><mat-checkbox class="example-margin" (change)="selectAllCb($event.checked)"></mat-checkbox></th>
                        <th>Nº Protocolo</th>
                        <th>Resumo</th>
                        <th>Interessado</th>
                        <th>Tipo</th>
                        <th>Data Cadastro</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let documento of documentos, let i = index">
                        <td><mat-checkbox [ngModel]="selectAll"(change)="onChangeCheckBox($event.checked,documento?.id)"></mat-checkbox>
                            </td>
                        <td id="codigo">/</td>
                        <td id="resumo"></td>
                        <td id="interessado"></td>
                        <td id="tipo"></td>
                        <td id="data"></td>
                        <td id="acoes">
                            <div class="row">
                                <button class="badge badge-light" [routerLink]="['/documentos/detalhe/',documento?.id]">
                                    <i class="material-icons" title="Editar protocolo">edit</i>
                                </button>
                                <button class="badge badge-light" (click)="gerarEtiqueta(documento?.id)">
                                    <i class="material-icons" title="Imprimir Etiqueta">print</i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

the master checkbox set a selectAll: boolean property, which is used by the checkboxes of the rest of the table, through [ngModel]. The checkboxes generated by ngfor, when clicked, pass values ​​to the component.

export class DocumentosComponent implements OnInit, OnDestroy, AfterViewInit {
  selectAll: boolean = false;
constructor(){}

ngOnInit() {}

 selectAllCb(isChecked: boolean) { 
      this.selectAll = isChecked;

  }
}

However, when the value of the checkboxes is changed by the property bind, the change event is not triggered.




Aucun commentaire:

Enregistrer un commentaire