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

Question

我正在嘗試使用表單中的開關來切換同一表單中兩個下拉菜單之一的外觀。 我相信這意味着我想使用由 MatSlide 切換發出的 MatSlideToggleChange class。 不幸的是，文檔沒有提供如何將 MatSlideToggleChange class 與 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)
  }

演示堆棧閃電戰

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)事件，我建議您在用戶拖動mat-slide-toggle時改用(change)事件以獲得更好的移動支持。 您基本上只是檢查 $event 的值，它是一個MatSlideToggleChange 。

Answer 3

HTML

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

TS

公共 swFechaFinalPago: boolean = false;