时间戳

首页 > 解决方案 > 更改事件来自哪里以及如何在 mat-selection-list 中停止它

javascript - 更改事件来自哪里以及如何在 mat-selection-list 中停止它

问题描述

我正在使用mat-selection-listinside amat-menu来过滤一些项目。每当菜单关闭时，选择列表似乎会触发valueChanges表单上的事件。我该如何阻止这个？与菜单和输入相同，不会valueChanges在菜单关闭时触发。

<button [matMenuTriggerFor]="m">Foo</button>
<mat-menu #m="matMenu" [overlapTrigger]="false" [formGroup]="form">
  <ng-template matMenuContent>
    <mat-selection-list (click)="$event.stopPropagation();" formControlName="foo">
      <mat-list-option [value]="item" *ngFor="let item of [1,2]">{{item}}</mat-list-option>
    </mat-selection-list>

  </ng-template>
</mat-menu>

<button [matMenuTriggerFor]="m1">Foo1</button>
<mat-menu #m1="matMenu" [overlapTrigger]="false" [formGroup]="form1">
  <ng-template matMenuContent>
    <input formControlName="foo1" (click)="$event.stopPropagation();">
  </ng-template>
</mat-menu>

this.form.valueChanges.subscribe(e => {
  // gets triggered on menu close
  console.log('changed form', e);
});

this.form1.valueChanges.subscribe(e => {
  // doesn't get triggered on menu close
  console.log('changed form1', e);
})

有什么办法可以在关闭时停止更改事件？

这里是游乐场

标签： javascriptangular

解决方案

推荐阅读