Question

我的应用中有一个基本的幻灯片切换按钮。
我想根据是否更改切换来更改幻灯片切换的文本。切换按钮时，基本上显示不同的文本。

我尝试使用Slide-toggle的toggleChange（）方法，但重新加载时无法显示该文本。
同样，由于该函数是在切换切换时调用的，因此即使在切换事件触发时切换进入关闭状态，它也会显示文本。我想在切换按钮时更改文本，但是仅在单击“保存设置”按钮时才保存切换的文本。我想我必须使用会话或本地存储来存储短信

我似乎不知道现在该怎么办。

请帮助。
预先感谢。

这是我的交易代码

export class PolicyComponent implements OnInit {

  formGroup: FormGroup;
  policy3: boolean=false;
  policy4: boolean=false;
  message:string="Message1";
  test:boolean=false;

  disable:boolean=true;
serverData:any
  constructor(
    private formBuilder: FormBuilder,private policyService:PolicyService
  ) { }

  ngOnInit() {


  this.formGroup = this.formBuilder.group({
      Policy1: new FormControl(false, []),
      Policy2: new FormControl(false, [])
  });
  this.policyService.getPolicy().subscribe((response) => {
      this.serverData = response[0];
      if(this.serverData.policy1=="F")
      {
        this.policy3=false;
      }
      else this.policy3=true;

      if(this.serverData.policy2=="F")
      {
        this.policy4=false;
      }
      else this.policy4=true;


      this.formGroup.controls.Policy1.setValue(this.policy3);
      this.formGroup.controls.Policy2.setValue(this.policy4);
  });
  // if(this.formGroup.controls.Policy1.value)
  // {
  //   this.message="Message1";
  // }
  // else if(!this.formGroup.controls.Policy1.value){
  //   this.message="Message2";

  // }
   // this.policyService.getUserById(+ localStorage.getItem("policyId")).subscribe();
}

  onFormSubmit() {
    console.log("Policy1::"+this.formGroup.controls.Policy1.value);
    if(this.formGroup.controls.Policy1.value)
    {
      this.serverData.policy1="T";
    }
    else{
      this.serverData.policy1="F";
    }


    console.log("Policy2::"+this.formGroup.controls.Policy2.value);
    if(this.formGroup.controls.Policy2.value)
    {
      this.serverData.policy2="T";
    }
    else{
      this.serverData.policy2="F";
    }
    //this.policyService.updatePolicy(this.policy.id,{policy1:this.policy.policy1}).subscribe(err=>{console.log(err)});
    this.policyService.updateUser(this.serverData).subscribe(err=>{console.log(err)});
 //   alert(JSON.stringify(formValue, null, 2));
 this.disable=true;

  }

  onChange(ob: MatSlideToggleChange) {
    // this.policy3 = !this.policy3;
    this.disable=false;
  }

  onChange1(ob: MatSlideToggleChange) {
    // this.policy4 = !this.policy4;
    this.message="Slide";
    this.disable=false;
  }
  displayMessage()
  { console.log("Value is:"+this.formGroup.controls.Policy1.value);

    if(!this.formGroup.controls.Policy1.value)
    {
      this.message="Message1";
    }
    else if(this.formGroup.controls.Policy1.value){
      this.message="Message2";

    }

   }
}

这是我的模板代码：

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event)"  (toggleChange)="displayMessage()"  formControlName="Policy1" >{{message}}</mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  formControlName="Policy2">Policy2</mat-slide-toggle></mat-list-item>

  </mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-rasied-button [disabled]="disable" type="submit">Save Settings</button>
</form>

Answer 1

请注意以下有关toggleChange的内容，这就是它们也有dragChange事件的原因。

当用户拖动以更改幻灯片切换时，事件不会触发值。

我个人的喜好是在这种情况下使用(change)，并评估事件以查看e.checked是true还是false ...这种方法，切换是否为拖动事件都无关紧要，您的方法将在进行任何更改时被调用，并且仅在切换处于checked状态时才设置消息。

<mat-slide-toggle       
      (change)="onChange($event);displayMessage($event)"
        formControlName="Policy1" >{{message}}</mat-slide-toggle>
</mat-list-item>

 displayMessage(e){
    if(e.checked)
      this.message = 'toggled'
    else
      this.message = 'Slide me!'
  }

Stackblitz

https://stackblitz.com/edit/angular-g9w2p8?embed=1&file=app/slide-toggle-overview-example.ts

Answer 2

这很简单。关键是在控件本身上设置一个id，以便您可以引用其状态。

<mat-slide-toggle class="ml-3" formControlName="paid" #paid >
   <small *ngIf="paid.checked;else notSelected" >Paid</small>
   <ng-template #notSelected>
          <small>Click to set as paid</small>
   </ng-template>
</mat-slide-toggle>

Answer 3

和另一种解决方案

<mat-slide-toggle #slide formControlName="enabled">
     <span>{{slide.checked?'label 1':'label 2'}}</span>
</mat-slide-toggle>

Answer 4

您可以尝试以下代码段：

<mat-slide-toggle formControlName="Policy1">
  <span *ngIf="!Policy1.value">Message false</span>
  <span *ngIf="Policy1.value">Message true</span>
</mat-slide-toggle>

更改切换时更改幻灯片文本

4 个答案: