Angular PrimeNG输入开关显示段落

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

您需要使用它。现在你制作了一个全新的var

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;
}
}

您可以在StackBlitz 上编辑或预览此处

Answer 3

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

this.bonusChecked = e.checked;

我假设e.checked返回true或false，而不是不写条件，因为我正在检查你只是将其用于console.log

Answer 4

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

如果您希望它具有反应形式，则需要订阅元素的更改事件。

这是堆叠式反应式