在 Angular 材料中关闭多选下拉菜单时触发事件答案

【问题标题】：Fire an event on close of multiselect dropdown in Angular material在 Angular 材料中关闭多选下拉菜单时触发事件
【发布时间】：2019-12-30 09:23:29
【问题描述】：

如何在关闭角度材料中的多选下拉菜单时触发事件？这是我的 HTML 模板

                  <mat-select  multiple
                  (focusout)="triggerEvent($event)">
                    <mat-option *ngFor="let option of templateOptions"[value]="option">
                      {{option.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

截至目前，每个选项的选择都会触发事件。我希望在用户完成选择所有值并在外部单击时触发它。我也尝试过模糊，但结果相同。

【问题讨论】：

标签： javascript jquery angular dom angular-material

【解决方案1】：

<mat-select multiple (openedChange)="triggerEvent($event)">
    <mat-option *ngFor="let option of templateOptions"[value]="option">
        {{option.name}}
    </mat-option>
</mat-select>

似乎您正在寻找 opensChange 事件发射器。切换选择面板时发出的事件。

document

【讨论】：

openChange 事件触发正常，但 $event 将根据选择面板的状态为真或假。现在如何获取选定的值？
triggerEvent($event.value)
当我们使用openedChange() 时，$event 将是true 或false。它不会有“价值”属性。
我对 Angular Material 不熟悉，但您可以尝试 [(ngModel)] 来绑定值。

【解决方案2】：

在我使用的角度材料版本（7.1.1>）中，您可以像这样使用关闭事件：

 <mat-select (closed)="method()">
 ...
 </mat-select>

请参阅stackblitz 中的此示例。

【讨论】：