Я хочу, чтобы мой выбор циновки не переходил к выбранному значению при нажатии на него.
Проблема в том, что я создал группы с возможностью складывания с помощью своего пользовательского метода toggleExpansion, и когда я выбираю параметр со свернутой группой optgroup, он переходит к положению значения до того, как произошла ошибка.
Я попытался установить высоту параметра mat на 0px, но он все равно переходит на теоретическую позицию параметра
мой код выбора мата:
<mat-form-field >
<mat-select [(value)]="tPres" [compareWith]="comparer" (selectionChange)="getSelectedValue($event)" multiple #mySelect >
<mat-select-trigger>
{{tPres?.length}} / {{nbPresta}}
</mat-select-trigger>
<ng-container *ngFor="let t of typePrestations">
<mat-checkbox color="primary" [checked]="isChecked(t)" [indeterminate]="isIndeterminate(t)" (change)="toggleSelection(t, $event)"></mat-checkbox>
<span (click)="toggleExpansion($event)" class="material-icons"> expand_less </span>
<mat-optgroup [label]="t.Code + ' - ' + t.Libelle">
<mat-option *ngFor="let y of t.Prestation" [(value)]="y">
{{y.Libelle}}
</mat-option>
</mat-optgroup>
</ng-container>
</mat-select>
</mat-form-field>
метод toggleExpansion:
toggleExpansion(event) {
if (event.target.innerText == "expand_less") {
event.target.innerText = "expand_more";
event.target.nextElementSibling.childNodes.forEach(e => {
if (e.tagName == "MAT-OPTION") {
e.style.height = "0px";
}
});
} else {
event.target.innerText = "expand_less";
event.target.nextElementSibling.childNodes.forEach(e => {
if (e.tagName == "MAT-OPTION") {
e.style.height = "";
}
});
}
}
РЕДАКТИРОВАТЬ : Я нашел способ сделать это.
Я добавил viewchild на свой mat-select
и переопределил его _onSelect()
метод, ничего не указав в ngOnInit()
:
метод находится в node_modules/@angular/material/esm5/select.es5.js
@ViewChild('mySelect') private prestationSelect: MatSelect;
ngOnInit(){ (<any> this.mySelect)._onSelect = () => {
//The code goes here, I just commented the following line in the method:
//if (isUserInput) { this._keyManager.setActiveItem(option);}
}