调用不同的onChange方法进行幻灯片切换 [英] Call different onChange method for slide toggle

问题描述

我正在创建一个具有两个切换的简单切换应用.我将切换状态保存在数据库中.我的问题是，当我切换一个幻灯片切换时，其他幻灯片切换的值也会改变.我对两个切换都有单独的onChnage()方法，但仍然遇到相同的问题.请帮忙.

I am creating a simple toggle app that that has two toggles.I'm saving the toggle state in a db. My issue is that when I toggle one slide-toggle, the value of other slide toggle also changes.I have seperate onChnage() methods for both toggles but still I get the same issue.Please help.Thanks in advance:

这是我的ts代码:

export class PolicyComponent implements OnInit {

  @Output() change: EventEmitter<MatSlideToggleChange>;
  formGroup: FormGroup;
  policy1: boolean=false;
  policy2: boolean=false;

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

  ngOnInit() {
 //   this.filteringSchedule = JSON.parse(sessionStorage.getItem('toggleButtonState'));

 this.policyService.getPolicy().subscribe(
  (response)=>{
    console.log(response);   

    this.serverData = response[0]; 
    console.log(this.serverData)
    if(this.serverData.policy1=="F")
    {
      this.policy1=false;
    }
    else this.policy1=true;

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



 }

 )

    this.formGroup = this.formBuilder.group({
      Policy1:new FormControl( this.policy1,[]),
      Policy2: new FormControl( this.policy2,[])

    });

   // 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";
    }

    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.policy1 = !this.policy1;
    this.disable=false;
  }

  onChange1(ob: MatSlideToggleChange) {
    this.policy2 = !this.policy2;
    this.disable=false;
  }
}

下面是我的模板:

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" ngNativeValidate>
  <mat-action-list>
    <mat-list-item > <mat-slide-toggle       
      (change)="onChange($event)"  [checked]="policy1"  formControlName="Policy1" >Policy1</mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle  (change)="onChange1($event)" [checked]="policy2" 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>

推荐答案

您对mat-slide-toggle元素具有双重绑定，因此Angular会感到困惑，并且不知道要在其中放置哪个值.

You have double binding to your mat-slide-toggle elements so Angular gets confused and it doesn't know which value to put there.

<mat-action-list>
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange($event)"  
      [checked]="policy1" <----------------------------------first binding
      formControlName="Policy1"><----------------------------second binding
      Policy1</mat-slide-toggle>
   </mat-list-item> 
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange1($event)" 
      [checked]="policy2" <----------------------------------first binding
      formControlName="Policy2"><----------------------------second binding
      Policy2</mat-slide-toggle>
   </mat-list-item>
</mat-action-list>

以我的经验，这会引起麻烦. 在Angular中使用反应式表单的正确方法是使用两种方法通过属性formControlName="..."进行绑定，然后在构建表单时应该执行以下操作:

In my experience, it causes this trouble. The right way of using reactive forms in Angular is using two ways binding by the property formControlName="...", then when you build the form you should do:

ngOnInit() {
    this.formGroup = this.formBuilder.group({
        Policy1: new FormControl(false, []),
        Policy2: new FormControl(false, [])
    });
    this.policyService.getPolicy().subscribe((response) => {
        this.serverData = response[0];
        this.formGroup.controls.Policy1.setValue(this.serverData.policy1=="F");
        this.formGroup.controls.Policy2.setValue(this.serverData.policy2=="F");
    });
}

和HTML:

<mat-action-list>
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange($event)"  
      formControlName="Policy1"><----------------------------Only!!
      Policy1</mat-slide-toggle>
   </mat-list-item> 
   <mat-list-item > 
      <mat-slide-toggle (change)="onChange1($event)" 
      formControlName="Policy2"><----------------------------Only!!
      Policy2</mat-slide-toggle>
   </mat-list-item>
</mat-action-list>

这篇关于调用不同的onChange方法进行幻灯片切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！