Question

我对这一切都是新手。.我简单地想在选中p-inputSwitch时显示一个段落元素（并且在再次选中它时将其消失/ false）。

这是我的HTML（组件）：

  <p-inputSwitch formControlName="bonus" 
                 (onChange)="clickBonusChecked($event)" 
                 onLabel="yes" 
                 offLabel="no">
   </p-inputSwitch>

   <p *ngIf="bonusChecked === true">Paragraph I want shown</p>

这是我的TS组件：

export class Component implements OnInit {
  bonusChecked: boolean;

  constructor(){}

  public ngOnInit(): void {
   this.bonusChecked = false;
  }

  public clickBonusChecked(e) {
   const bonusChecked = e.checked;
    if (bonusChecked) {
      console.log('jsdhck');
    }
  }

有人知道如何进行这项工作吗？我发现PrimeNG文档非常有限。

Answer 1

您需要使用它。现在您创建了一个新的变量

   public clickBonusChecked(e) {
   this.bonusChecked = e.checked;
    if (bonusChecked) {
      console.log('jsdhck');
    }
  }

Answer 2

只需使用[ngModel]

从域模型创建FormControl实例，并将其绑定到表单控件元素。

并使用*ngIf来显示和隐藏这样的段落*ngIf="bonusChecked"

您可以像这样检查p-inputSwitch的状态

<h3 class="first">Basic - {{bonusChecked}}</h3>

HTML

<h3 class="first">Basic - {{bonusChecked}}</h3>


<p-inputSwitch [(ngModel)]="bonusChecked"
                 (onChange)="clickBonusChecked($event)" 
                 onLabel="yes" 
                 offLabel="no">
   </p-inputSwitch>

   <p *ngIf="bonusChecked">Paragraph I want shown</p>

TS

bonusChecked: boolean = false;

  constructor(){}

  public ngOnInit(): void {
   this.bonusChecked = false;
  }

  public clickBonusChecked(e) {
   const bonusChecked = e.checked;
    if (bonusChecked) {
      console.log('jsdhck');
      this.bonusChecked = true;
    }
 }

您可以编辑或预览Here on StackBlitz

Answer 3

您需要在clickBonuesChecked函数中设置bonusChecked = true

this.bonusChecked = e.checked;

我假设e.checked返回true或false，而不是如果条件正在检查，因为我正在检查您是否将它用于console.log

Answer 4

使用[（ngModel）]非常简单。这是stackblitz

如果要使用反应形式，则需要订阅元素的change事件。

这里是stackblitz reactive form

Angular PrimeNG Inputswitch显示段落

4 个答案: