typescript 如何使用NzPopConfirm实现nz切换

wn9m85ua  于 2022-12-14  发布在  TypeScript
关注(0)|答案(1)|浏览(202)

我正在尝试用NzPopConfirm实现一个nz开关,但是它不起作用。一个实际的例子会有很大的帮助!
`

<nz-form-item>
    <nz-switch formControlName="aso"
               nz-popconfirm
               nzPopconfirmTitle="Recomendados que o ASO seja enviado! Tem certeza que não deseja solicitá-lo?"
               (nzOnConfirm)="admissaoForm.controls.aso.value == true"
               (nzOnCancel)="admissaoForm.controls.aso.value == false">
    </nz-switch>
</nz-form-item>

`

jjjwad0x

jjjwad0x1#

下面是一个基本的工作示例。请仔细阅读docs,以便更深入地理解。

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-switch-control',
  template: `
    <nz-switch [ngModel]="switchValue"
    nz-popconfirm
    (nzOnConfirm)="confirm()"
    (nzOnCancel)="cancel()"
    nzPopconfirmTitle="Recomendados que o ASO seja enviado! Tem certeza que não deseja solicitá-lo?" [nzControl]="true" (click)="clickSwitch()" [nzLoading]="loading"></nz-switch>
  `,
})
export class NzDemoSwitchControlComponent {
  switchValue = false;
  loading = false;

  clickSwitch(): void {
    this.loading = true;
  }

  confirm() {
    this.switchValue = true;
    this.loading = false;
  }

  cancel() {
    this.loading = false;
    this.switchValue = false;
  }
}

forked stackblitz

相关问题