Question

我在下面的代码中遇到的问题是，当我点击确认时，交换机会发生变化。我希望只有在单击“确定”时才能更改开关。

你可以建议我吗？如何确认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>

ts代码：

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

此代码是多个交换机的示例代码，您可以添加额外的逻辑：

HTML

<section class="example-section">
  <div *ngFor="let item of homeboxsp;let i = index">
    <mat-slide-toggle class="example-margin" [(ngModel)]="checkedBtn[i]" (click)="onActiveHomeboxP(i)">
    </mat-slide-toggle>
  </div>
</section>

TS

  checkedBtn: any[]=[];
  homeboxsp = ['a','b','c'];

  constructor() {    
  }

  ngOnInit() { }

  onActiveHomeboxP(i:any) {
    if (confirm('Are you sure?')) {

      console.log('true')
    } else {
      this.checkedBtn[i] = !this.checkedBtn[i];
    }


  }

Answer 2

demo (e , element){ 
console.log(element.status);
if (element.status == true){
    if(confirm('true button deactive Are you sure')){
        this.getUsersService.changeStatus(element.id).subscribe((data) => {
            if (data === 'error') {
                e.source.checked = true;                    
                this.snackBar.open('Server Error happened please try later.', '', {
                    duration: 3000,
                    panelClass: ['error-snackbar']
                });
                
            } else {
                e.source.checked = false;
                this.callSkipLevelUsers();

重新加载表格

                    this.snackBar.open('user status changed succesfully!!!', '', {
                        duration: 3000,
                        panelClass: ['success-snackbar']
                    });
                   
                }
            });
        } else {
            e.source.checked = true;
        }
    } else {
        if(confirm('false button active Are you sure')){
            this.getUsersService.changeStatus(element.id).subscribe((data) => {
                if (data === 'error') {
                    e.source.checked = false;
                    this.snackBar.open('Server Error happened please try later.', '', {
                        duration: 3000,
                        panelClass: ['error-snackbar']
                    });
                    
                } else {
                    e.source.checked = true;
                    this.callSkipLevelUsers();
    reload table 
                    this.snackBar.open('user status changed succesfully!!!', '', {
                        duration: 3000,
                        panelClass: ['success-snackbar']
                    });
                   
                }
            });
        } else {
            e.source.checked = false;
        }
    }
}

角垫桌垫滑块为我工作

如何通过确认进行mat-slide-toggle

2 个答案: