angular - 如何使用 confirm 制作 mat-slide-toggle

Question

我在下面的代码中遇到的问题是，当我单击确认 时，开关会发生变化。我希望开关仅在单击“确定”时更改。

你能给我一些建议吗？如何使用 confirm 制作 mat-slide-toggle？

HTML代码:

<form [formGroup]="myform" class="col s12">
<div *ngFor="let item of homeboxsp;let i = index">
            <section class="example-section">
            <mat-slide-toggle value="active" formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"(click)="onActiveHomeboxP()"> {{item.active}}
            </mat-slide-toggle>
        </section>
</div>
</form>

代码:

export class AppComponent {
  public homeboxsp: HomeboxP[] = [];
  myform: FormGroup;
  checkedBtn: boolean;
  constructor(public service: Service) {
  }
  ngOnInit() {
    this.populateFormHomeboxP();
  }
  populateFormHomeboxP() {
    this.homeboxsp = this.service.getData();


    let controls = {
      'homeboxpackage_id': new FormControl('', Validators.required)
    };

    for (let i = 0; i < this.homeboxsp.length; i++) {
      controls['active-' + i] = new FormControl(this.homeboxsp[i].active == '1', Validators.required)
    }
    this.myform = new FormGroup(controls);
    this.patchForm();
  }
  patchForm() {
    this.myform.patchValue({
      homeboxpackage_id: this.homeboxsp.map(x => x.homeboxpackage_id),
    });
    console.log(this.homeboxsp.map(x => x.active))
    console.log(this.homeboxsp.map(x => x.homeboxpackage_id))
  }
  onActiveHomeboxP() {
    if (confirm('Are you sure?')) {
      let edigps = this.myform.value
      console.log(edigps)
      console.log('true')
    } else {
      this.checkedBtn = !this.checkedBtn;
    }
  }
}

Answer 1

如果你有一个对象，你可以在(更改)事件之后重新分配值:

<mat-slide-toggle (change)="slideToggleChange($event, obj)">
   Change me
</mat-slide-toggle>

slideToggleChange(event: MatSlideToggleChange, obj: any): void {
    event.source.checked = obj.enabled; // Force slide toggle with our value
  
    // Open confirmation dialog
    this.dialog.open(ConfirmationDialog, {
        data: config,
    }).afterClosed().subscribe(
        (confirm: boolean) => {
        if (confirm === true) {
            // Do something
        }
      }
    );
  }