Question

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

这是我的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>

Answer 1

您对mat-slide-toggle元素进行了双重绑定，因此Angular感到困惑，并且不知道将哪个值放在那里。

<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="..."绑定两种方式，然后在构建表单时应该这样做：

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>

Answer 2

这是您问题的答案

  <mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Result</h2>

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

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

这是ts代码

  export class SlideToggleConfigurableExample {
  color = 'accent';
  checked1 : boolean=true;
  checked2:boolean=false;
  disable:any;

  changed(){
  //  this.checked1 = !this.checked2;
    this.checked1=true;
  }
  changed2(){
    // this.checked1 = !this.checked2;
    this.checked2=false;
  }
}
[stackblitz link which is working,Please refer][1]

调用不同的onChange方法进行幻灯片切换

2 个答案: