Как предотвратить переход mat-select к выбранному значению при выборе значения? - PullRequest
0 голосов
/ 15 января 2019

Я хочу, чтобы мой выбор циновки не переходил к выбранному значению при нажатии на него.

Проблема в том, что я создал группы с возможностью складывания с помощью своего пользовательского метода 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);}
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...