angular-material - 选中的属性在 mat-radio-button 中不起作用
问题描述
我正在创建一个带有选中属性的单选按钮,但它没有显示为选中状态
<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio" [ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
<mat-radio-button value="own" checked name="own">Own</mat-radio-button>
<mat-radio-button value="competitor" name="own">competitor</mat-radio-button> </mat-radio-group>
我希望默认选中第一个单选按钮
解决方案
如果使用,ngModel
则需要将单选按钮的值ngModel
传递给.
<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio"
[ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
<mat-radio-button value="own" name="own">Own</mat-radio-button>
<mat-radio-button value="competitor" name="own">competitor</mat-radio-button>
</mat-radio-group>
和 ts 文件
selectedRadio = 'own'; //default value
radioChange(e){
console.log(this.selectedRadio)
}
或动态填充
<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio"
[ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
<mat-radio-button *ngFor="let but of list" [value]="but.id" name="own" >
{{but.name}}
</mat-radio-button>
</mat-radio-group>
ts文件
list = [{ "name": "own", id: "own"},{ "name": "competitor", id: "competitor"}];
selectedRadio =this.list[0].id;
推荐阅读
- python - 在多变量函数中除以零
- laravel - 如何解决需要多个版本的相同依赖项的 NPM 问题?
- apache - Apache2 - 如何禁用虚拟主机上的目录列表?
- java - 将会话值附加到 Java 中的数组
- python - Python上的KeyError检查幅度
- android - ViewModel - 在运行时观察 LiveData 时更改方法的参数?
- assembly - PowerPC ASM:insrdi 指令
- sql-server-2008 - 在 SQL 中使用 CTE 创建表
- go - 框架 GoColly - 重定向到 HTTPS 不起作用
- git - 如何解决拉取请求中的冲突?