如果表单上只存在一个单选按钮，则默认选中PrimeNG-radiobutton
如果表单上只存在一个单选按钮，则默认选中PrimeNG-radiobutton
提问于 2019-05-22 03:15:41
我开始使用Angular7的PrimeNG组件，并设置了我的第一个单选按钮。默认情况下，我可以将特定的单选按钮设置为选中。然而，我的目标是计算表单上存在的单选按钮的数量，如果表单上只有一个单选按钮，则将单选按钮设置为默认选中。如果值是硬编码的，这不是非常理想的方法，但我稍后将为此应用程序添加后端，因此计算单选按钮的数量(来自数据库的行)是至关重要的。
我在网上搜索了解决方案，尤其是Stack，但我很难找到AngularJS或其他相关的解决方案。我想坚持使用Angular。我使用的是Angular7和PrimeNG UI组件。
(PrimeNG文档：https://www.primefaces.org/primeng/#/radiobutton)
home.component.html
<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="preopt1"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="preopt2"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="preopt3"></p-radioButton></div>
</div>home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
val1: string = 'Option 1';
constructor() { }
ngOnInit() {
}
}预期的结果是，如果表单上只有一个单选按钮，则默认情况下选择/选中它，否则默认情况下不选择/选中任何内容。
我刚接触Angular，但非常渴望学习。任何帮助都将不胜感激。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-22 03:32:49
我的解决方案是：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
val1: string;
radios = [
{
value: 'Option 1',
label: 'Option 1',
inputId: 'preopt1'
},
{
value: 'Option 2',
label: 'Option 2',
inputId: 'preopt2'
},
{
value: 'Option 3',
label: 'Option 3',
inputId: 'preopt3'
}
];
constructor() {
if ( this.radios.length === 1 ) {
this.val1 = this.radios[0].value;
} else {
this.val1 = 'None';
}
}
ngOnInit() {
}
}home.component.html
<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-radioButton *ngFor="let i of radios" name="group2" [value]="i.value" [label]="i.label" [(ngModel)]="val1" [inputId]="i.inputId"></p-radioButton></div>
</div>可以删除无线阵列的两个元素，以便可以查看构件的行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56245053
复制相关文章
相似问题
腾讯云开发者
