Question

我尝试使用表单中的开关来切换同一表单中两个下拉菜单之一的外观。我相信这意味着我想使用MatSlide切换发出的MatSlideToggleChange类。不幸的是，documentation没有提供如何将MatSlideToggleChange类与MatSlide一起使用的示例。

有人以这种方式使用过MatSlide吗？

Answer 1

您可以使用输出更改属性来更改其更改值

<mat-slide-toggle
   [(ngModel)]="checked"
   class="example-margin"
   [color]="color"
   (change)="changed()">
     Slide me! {{checked}}
</mat-slide-toggle>

<强>组件

color = 'accent';
checked = false;

  changed(){
    console.log(this.checked)
  }

demo stackblitz

Answer 2

MatSlideToggleChange具有两个字段：

source: MatSlideToggle
checked: boolean

在.html文件中

<mat-slide-toggle
   (change)="onChange($event)">
</mat-slide-toggle>

在.ts文件中

onChange($event: MatSlideToggleChange) {
    console.log($event);
}

您将在控制台中获得如下输出：

MatSlideToggleChange {source: MatSlideToggle, checked: false}

如果您正在考虑使用(click)事件而不是(change)事件，我建议您使用(change)事件代替，以便在用户拖动{{ 1}}。基本上，您只需要检查$ event的值为mat-slide-toggle。

如何在Angular Material中使用mat-slide-toggle的MatSlideToggleChange

2 个答案: