mat-slide-toggle 的 MatSlideToggleChange 事件的使用

Question

我正在尝试使用表单中的开关来切换同一表单中两个下拉菜单之一的外观。

我可以使用

MatSlideToggleChange

类切换发出的

MatSlide

事件来实现我想要的结果吗？

Answer 1

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

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

组件

color = 'accent';
checked = false;

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

演示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)

事件，以便在用户拖动

mat-slide-toggle

时获得更好的移动支持。您基本上只是检查 $event 的值，它是一个

MatSlideToggleChange

。

Answer 3

HTML

<mat-slide-toggle [(ngModel)]="swFechaFinalPago" name="swFechaFinalPago">
                Fecha Final Pago? {{swFechaFinalPago}}</mat-slide-toggle>

TS

public swFechaFinalPago: boolean =  false;