Witam.
Najwyraźniej robię coś źle. Potrzebuje, aby po kliknięciu w element menu, to menu zostało otwarte. Dopiero po naciśnięciu poza obszarem menu doszło do zamknięcia. Wiele stackoverflowów sugeruje, aby skorzystać z $event.stopPropagation()
, ale u mnie to nie działa.
Elementy menu - w pętli generowane
<button (click)="selectColumn(column, $event)" *ngFor="let column of productColumns" mat-menu-item [disabled]="column.disabled">
Funkcja selectColumn()
selectColumn(selected: Column, event: Event) {
const columns = this.localStorage.getObject<Column[]>('productsColumns');
const column = columns.find(x => x.id === selected.id);
const index = columns.indexOf(column);
columns[index].selected = !columns[index].selected;
this.productColumns = columns;
this.localStorage.setObject('productsColumns', columns);
this.tableColumns = columns.filter(x => x.selected === true).map(({ id }) => id);
event.stopPropagation();
}
Jeśli skorzystam tylko z opcji $event.stopPropagation()
, bez własnej logiki to działa:
<button (click)="$event.stopPropagation()" *ngFor="let column of productColumns" mat-menu-item [disabled]="column.disabled">
Czy to oznacza, że muszę ręcznie wywołać menu.open()
oraz menu.close()
w odpowiednich przypadkach?