在angular 6中选择默认单选按钮
在Angular 6中选择默认单选按钮，可以通过以下步骤实现：
- 首先，在组件的HTML模板中创建单选按钮组。可以使用Angular的
ngFor指令来循环创建多个单选按钮，并使用[(ngModel)]指令绑定选择的值。
<div *ngFor="let option of options">
<input type="radio" name="radioGroup" [(ngModel)]="selectedOption" [value]="option">
{{ option }}
</div>- 在组件的Typescript文件中定义选项和默认选中的值。
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
selectedOption: string = 'Option 1';- 如果需要在组件初始化时设置默认选中的单选按钮，可以在
ngOnInit生命周期钩子中设置selectedOption的值。
ngOnInit() {
this.selectedOption = 'Option 2';
}这样，当组件加载时，'Option 2'将被选中。
关于Angular 6的更多信息和文档，请参考腾讯云的Angular产品介绍链接地址：Angular - 腾讯云
相关·内容
我的项目在Angular 9中，我正在使用反应式表单，我在表单中有Angular材质单选按钮组(垫-单选-按钮)，我选中了默认值，并且在我的表单中不需要单选控件，因为我选择了默认值。现在我的表单验证了单选按钮，我必须选择一个选项，如果我不选择一个单选选项，我的保存按钮
浏览 54提问于2020-07-12得票数 0
1回答
我正在尝试更改单选按钮和墨迹波纹的颜色。覆盖单独的CSS选择器是痛苦的，而且容易出错。我甚至不想在我的应用程序的单选按钮中添加"md-primary“或"md-accent”类。我想覆盖默认主题。我搜索了文档，搜索了谷歌，所以，Angular Material GitHub和演示页面，但找不到简单问题的答案：
单选按钮使用默认主题的哪个调色板？
浏览 1提问于2017-06-22得票数 1
我开始使用Angular7的PrimeNG组件，并设置了我的第一个单选按钮。默认情况下，我可以将特定的单选按钮设置为选中。然而，我的目标是计算表单上存在的单选按钮的数量，如果表单上只有一个单选按钮，则将单选按钮设置为默认选中。如果值是硬编码的，这不是非常理想的方法，但我稍后将为此应用程序添加后端，因此计算单选按钮的数量(来自数据
浏览 74提问于2019-05-22得票数 1
回答已采纳
我使用下面这段代码来选择单选按钮的第一个选项，但不知何故它似乎不起作用 <input type="radio" ng-value="true
浏览 3提问于2014-07-07得票数 1
1回答
当单选按钮被选中时，我不能取消选择。我该怎么办？!mat-radio-button> </mat-radio-group>我有两个单选按钮如果我选择了一个单选按钮，那么就不能取消选择它，我想
浏览 0提问于2019-07-07得票数 0
我有两个带ngmodel的单选按钮。使用xls在typescript文件中初始化downloadVal。因此，默认情况下，当页面加载时，应该选择xls选项 <label for="downloadxls"></label>
<input id="downloadxlsngModel)]="downloadVal" type="radio" valu
浏览 1提问于2018-06-06得票数 0
我有两个问题(可能是因为同一个bug)：2.)在我的代码中，selectedValue的值始终是未定义的。另一个值用户名在我的代码中工作。(但selectedValue的值在"tt“部分起作用，当我单击单选按钮时将被更改)<input class="login__input" type="
浏览 0提问于2015-08-18得票数 0
回答已采纳
2回答
我有三个单选按钮。我想用它们的角度反应形式。在默认选择任何单选按钮的情况下，我无法触发更改事件。我想默认选择男性单选按钮，但更改事件的默认选择不触发。请帮我找出我在这里做错了什么。这是链接
import { Component, OnInit } from '@angular/core';
impor
浏览 4提问于2019-12-25得票数 1
回答已采纳
虽然复选框和单选按钮仍然呈现、选择和突出显示，但当选中时，它们无法在复选框内呈现实际复选框，或在选择单选按钮时呈现单选按钮中的点。在选择过程中没有显示控制台错误(在复选框中取消选择)。
预期的行为我希望看到复选框和单选按钮的点呈现。问题的最小再现与指令创建一个复选框或单选按钮在</em
浏览 0提问于2018-06-11得票数 1
回答已采纳
我的表单有一个复选框，后面跟着几个单选buttons.Basically，设计要求用户能够使用复选框清除一组单选按钮(或设置默认值)。如果用户应该选择一个单选按钮，那么复选框也将被设置。总的来说，下面的代码满足了大多数需求，但是，当它不能工作时，有一个条件：
用户再
浏览 2提问于2018-01-12得票数 0
我对Angular是个新手。这里需要一些帮助。两个文本字段有两个单选按钮： <label class="radio-container mb-0 mt-1">
<input id="Page_Color(ngModel)]='Br.Page_IsGraphic'中，Br.Page_IsGraphic的值要么是真，要么是假，这是动态的，我想是基于这个单选<em
浏览 7提问于2020-02-13得票数 0
0回答
我在angular 2 (4.1.2)中使用了反应式表单 </label>问题是，虽然这是工作的单选按钮是预先选择的，但我不想要的，而是它应该是通过点
浏览 5提问于2017-06-19得票数 10
回答已采纳
我只想将单选按钮中的默认检查值更改为用户选择的value.Because，每当我尝试它时，它仍然显示在控制台日志中，默认选中，而不是被选中的那个。我想要更改默认选中的用户在HTML中选择什么。
浏览 0提问于2018-12-13得票数 1
回答已采纳
我不知道为什么每当您选择value="1"和ng-value="true"按钮中的一个时，这两个按钮都被选中。<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app=&q
浏览 1提问于2016-07-19得票数 2
请找到单选按钮的。我期望当我选择单选按钮时，从$scope.itemList中选择的对象将被分配给selectedItemDetails，但它没有发生。此外，在默认情况下，当页面加载时，我希望基于var tagNumTobeSelectedByDefault = 2;选择默认的单选按钮，即默认情况下选择"Gety of House&qu
浏览 7提问于2015-12-11得票数 1
回答已采纳
3回答
我在这里创建了一个堆栈闪电战https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts 在该示例中，当页面加载时，我希望显示选中的'ledger‘单选选项，以及它下面的value1被选为默认选项。如果我将单选按钮更新为'available'，我需要选择'available‘下面的
浏览 32提问于2019-10-07得票数 1
回答已采纳
我已经创建了一组单选按钮。我想要设置一个默认的单选按钮'checked‘，并且每当动态单击其他单选按钮时，我如何才能捕获哪个单选按钮，我可以相应地在我的typescript的条件语句中使用。{ });
} 如何在TS文件中获得选中的值，以便在条件语句中使用被单击的
浏览 23提问于2019-04-30得票数 1
回答已采纳
我使用的是angular 5，在我的html中使用的是单选按钮。通过选中该单选按钮并单击旁边的按钮，可以打开一个模式，该模式还包含一个默认选中的单选按钮。当我从模式中删除单选按钮时，问题不显示。
<mat-radio-button [checked]="item.isChecked" class
浏览 1提问于2019-05-15得票数 1
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"><id="{{x.id}}" name="{{x.name}}"><label for="{{x.id}}">{{x.value}}</l
浏览 0提问于2016-08-06得票数 0
回答已采纳
如果我在模型驱动的表单中创建单选按钮，它们可以很好地工作，但它们不具有由formControlName默认值反映的选中的单选按钮。这适用于页面加载，因为在单选按钮中正确选择了默认值。如果我再次单击它，则单选按钮的选择状态会更改。因此，需要单击两次才能将其切换回默认设置。如果我在那之后再次单击另一个单选按
浏览 0提问于2017-01-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
