如何解决在mat-radio-group中选择了多个mat-radio-button
`<mat-radio-group [ngClass]="cssForGroup" name="test">
<mat-radio-button *ngFor="let option of options | filter:searchText"
class="cssForRow"
[value]="option"
[checked]="option.isSelected"
(change)="selectOption($event)">
{{ option.value }}
<div class="info" [hidden]="!option.info">{{option.info}}</div>
</mat-radio-button>
</mat-radio-group>`
这是我为使用角形材料(其中选项为对象)的组中的单选按钮提供的代码。我有一个问题,其中多个选项的option.value可以相同,但option.info不同。但是当我选择这种情况的单选按钮时。所有具有相同option.value的按钮都在UI上被选中。
我尝试将名称属性添加到mat-radio-group。我已将值属性从对象更改为唯一键。我在ngFor中尝试过trackBy。这些解决方案无法解决问题。
有人可以帮我解决这个问题吗?
解决方法
“我遇到一个问题,其中多个选项的option.value可以相同,但option.info不同”。
然后,您将无法使用Mat单选按钮。此外,您永远不会知道您点击了什么值。我必须假设您有很多选择
//"WRONG" I don't know if you push the first or the last option
options=[{value:1,info:'one'},{value:2,info:'two'},{value:1,info:'one bis'}]
您必须使用
//"OK",If I choose the first option the value is 101,value%100=1
// If I choose the last option the value is 201,value%100=1
// and know that Is the last option
optionsValors=[{value:101,{value:102,{value:201,info:'one bis'}]
//或
optionsValors=this.options.map((x,index)=>
({value:index*100+x.value,info:x.info}))
如果要“实际值”,请记住使用模块运算符
value=value%100
如果options.value是字符串,则可以添加字母并使用substr进行类似的操作
注意:我想您想将选项的值存储在变量中。记住这是角!那么,为什么不使用[(ngModel)]?
<mat-radio-group [ngClass]="cssForGroup" name="test" [(ngModel)]="test">
<mat-radio-button *ngFor="let option of options | filter:searchText"
class="cssForRow"
[value]="option" >
{{ option.value }}
<div class="info" [hidden]="!option.info">{{option.info}}</div>
</mat-radio-button>
</mat-radio-group>
,
我的options对象也有一个名为id的键。对于数组中的所有对象,ID均未设置为唯一。 (这是我的错。)因此,当我为数组中的每个对象设置唯一的ID时。有效。我正在使用mat-radio-button的event / api处理选择。因此,我不必使用ngModel。 (但这是一个很好的实践!??但是这个有角度的项目的建筑设计是完全不同的。不同的问题。)
但是我在这里仍然有无法解释的行为。我没有使用任何方式告诉mat-radio-button有关id的信息。那怎么给它带来问题。也许[value]而不是[ngValue]在DOM或mat-radio-button的内部工作中引起了问题,但我仍在使用[value],并且以某种方式唯一的键'id'解决了它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。