Angular 材料多 select 獲取隱藏的選定值

Question

設想：

• 我在 angular 材質多選中有一個過濾器

去做：

• 我想在隱藏的下拉列表中獲取選定的值..

  我用谷歌搜索並試圖找到文檔，但找不到任何參考來將隱藏事件添加到 miltiselect

Answer 1

在關閉mat-select下拉列表后可以使用多選值的演示

應用代碼： https ： //stackblitz.com/edit/angular-values-access-after-dropdown-close？file = src / app / app.component.html

方法：

• 保留變量以存儲multi-select值。
  使用openedChange事件作為(openedChange)="comboChange($event)" ，並在該存儲中將選定的值存儲到數組或不同的變量中。
  如果下拉列表已關閉，則事件值為false ，因此我在演示代碼中使用了它。
• 此外， mat-select與[formControl]="toppings" ，因此在任何其他方法中，您可以使用this.toppings.value訪問其值，它將返回一個包含所選值的數組。

Answer 2

添加如下 Formcontrol 變量，我們可以從 angular 多選下拉列表中枚舉所選項目

 <mat-select multiple placeholder="Reason" [formControl]="selectedReasons">
        <mat-option value="option1">option1</mat-option>
        <mat-option value="option2">option2</mat-option>
        <mat-option value="option3">option3</mat-option>
        <mat-option value="option4">option4</mat-option>
      </mat-select>

TS

 selectedReasons = new FormControl();

  reasonDropdownChangeEvent(event: any) {
console.log(this.selectedReasons.value.toString());

}