почему выбор не работает как надо? angular материал

Question

HTML ---->

<ng-container matColumnDef="seleccione">
<mat-header-cell *matHeaderCellDef>Seleccione</mat-header-cell>

<!--<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>-->

<mat-cell *matCellDef="let row">
<mat-checkbox #checkbox="matCheckbox"
(change)="$event ? masterToggle(row) : null"
                    >

</mat-checkbox>
</mat-cell>

</ng-container>

COMPONENT.TS ---->

masterToggle(row) {

console.log("row---->", row);
console.log("this.selection.selected---->", this.selection.selected);
console.log("this.selection.selected.length---->", this.selection.selected.length);
console.log("selection.isSelected---->", this.selection.select(row));

}

Проблема в том, что когда я нажимаю один раз на флажок, то значения «selected» и «lenght» возвращаются пустыми, но когда я дважды щелкаю, он возвращается, как и должно.

Может кто-нибудь сказать мне, что я не рассматриваю?

Answer 1

Попробуйте это:

<mat-checkbox #checkbox="matCheckbox"
(change)="$event ? masterToggle(row) : null"
 z-order:20
>

Я думаю, что причина двойного щелчка в том, что первый щелчок меняет фокус, который теперь находится внутри области флажка. Как будто есть слой над флажком.