Как запретить установку флажка при щелчке в любом месте строки? - PullRequest
0 голосов
/ 26 апреля 2019

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

selection: SelectionModel<aproveTable> = new SelectionModel<aproveTable>(true, []);
@Output() approveSelectEvent: EventEmitter<aproveTable[]> = new EventEmitter<aproveTable[]>();
ngOnInit() {
        this.selection.changed.asObservable().subscribe(
            (value: SelectionChange<aproveTable>) => {
                this.approveSelectEvent.emit(this.selection.selected);
        });
    }
<ng-container matColumnDef="select">

                <th mat-header-cell *matHeaderCellDef>
                </th>
                <td mat-cell *matCellDef="let row">
                    <mat-checkbox (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                </td>

</ng-container>

enter image description here

Ответы [ 3 ]

2 голосов
/ 26 апреля 2019

Снизу строки:

<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
</tr>

Удалить:

(click)="selection.toggle(row)" -- remove this

тем самым вы говорите под углом, всякий раз, когда вы нажимаете, выбор строки должен быть изменен.

и

<mat-checkbox (click)="changeSelection(row)" [checked]="selection.isSelected(row)">
</mat-checkbox>

напишите это, чтобы только флажок переключал выделение, вот метод changeSelection,

changeSelection(row){
  setTimeout(()=>{
    this.selection.toggle(row);
  })
}
1 голос
/ 26 апреля 2019

Благодаря вашему примеру с stackblitz я смог увидеть ошибку.Вы делаете дополнительное переключение выделения в строке 78 (click)="selection.toggle(row)", просто избавьтесь от него:

      <tr mat-row *matRowDef="let row; columns: displayedColumns;">

Живой пример:

https://stackblitz.com/edit/angular-stack-55862476-materialrow?file=app/table-selection-example.html

0 голосов
/ 26 апреля 2019

для использования (click) = "$ event.stopPropagation ()" в справках th и td. но здесь должен быть более логичный способ

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...