Question

我希望我的垫选控件在单击时不跳到所选值。

问题是我使optgroup与我的自定义toggleExpansion方法可折叠，当我选择一个具有折叠optgroup的选项时，它会跳到崩溃发生之前的值的位置。

我尝试将mat-option的高度设置为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 = "";
        }
      });
    }
  }

编辑：我找到了一种方法。

我在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);}
    }

Answer 1

使用您自己的答案作为起点（您在问题的编辑中提供的），我想出了以下内容，目前看来效果很好：

在我的 HTML 中，我有：

<mat-select #selector ...>

然后在我的课堂上：

@ViewChild("selector") selector: MatSelect;
...
ngAfterViewInit(): void {
   (<any>this.selector).baseonselect = (<any>this.selector)._onSelect;
   (<any>this.selector)._onSelect = (ev, isUserInput) => {
      (<any>this.selector).baseonselect(ev, false);
   };
}

我使用 ngAfterViewInit 因为在调用 ngInit 时 this.selector 还没有被初始化（至少，这是我的经验）。

如何在值选择时如何防止选择垫跳至所选值？

1 个答案: