mardi 29 septembre 2020

Two way binding inside mat-table

I have a binding issue with mat-checkbox inside a mat-table. The dataSource of the table is a basic array of objects and each object has a selected boolean property. For some reason, the two way binding is not working and selected always return false when the click event is fired.

clients: Client[] = [
{ id: 1, name: `Client`, disabled: true, selected: false },
];

 onClientClick(client: Client) {
     console.log(client) // selected here is false
 }

<table mat-table [dataSource]="clients">
    <ng-container matColumnDef="client-name">
    <th mat-header-cell *matHeaderCellDef>header</th>
    <td mat-cell *matCellDef="let client">
        <mat-checkbox (click)="onClientClick(client)" [(ngModel)]="calque.selected"
        [disabled]="calque.disabled">
        
        </mat-checkbox>
    </td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsClients"></tr>
</table>



Aucun commentaire:

Enregistrer un commentaire