如何为 Angular Material Slide Toggle 设置默认值？答案

【问题标题】：How can I set a default value for Angular Material Slide Toggle?如何为 Angular Material Slide Toggle 设置默认值？
【发布时间】：2022-04-11 21:26:32
【问题描述】：

如何为滑动切换设置默认值？

我可以在 ngOnInit 中为我的属性设置一个初始值，但必须有一个 'Angular Way'

        <mat-slide-toggle
          [checked]="system.ignoreUser"
          (toggleChange)="system.ignoreUser= !system.ignoreUser">
          <span *ngIf="system.ignoreUser">{{'ignoreUser' | translate}}</span>
          <span *ngIf="!system.ignoreUser">{{'ignoreUser' | translate}}</span>
        </mat-slide-toggle>

谢谢！

【问题讨论】：

标签： angular angular-material

【解决方案1】：

如果你使用reactive forms，你可以像下面这样设置默认值：

mySlideToggle= new FormControl(true,[Validators.required]);

【讨论】：

【解决方案2】：

您可以在 html 中使用 ngModel：

<mat-slide-toggle [(ngModel)]="system.ignoreUser">
    <span *ngIf="system.ignoreUser">{{'ignoreUser' | translate}}</span>
    <span *ngIf="!system.ignoreUser">{{'ignoreUser' | translate}}</span>
</mat-slide-toggle>

【讨论】：

np @HugoSeleiro

【解决方案3】：

[(ngModel)] 在 reactiveForm angular 13 中为我工作：

<mat-slide-toggle 
   formControlName="super" 
   labelPosition="before" 
   color="primary"
   (change)="slideToggleChange($event)"
   [(ngModel)]="checked">
</mat-slide-toggle>

【讨论】：