在垫子单选组中选择了多个垫子单选按钮

Question

`<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不同。但当我选择这样一个案例的单选按钮时。所有具有相同选项值的按钮都会在UI上被选中。

我已经尝试将name属性添加到mat无线电组中。我已将值属性从对象更改为唯一键。我在ngFor中尝试过trackBy。这些解决方案并没有解决问题。

有人能帮我修一下吗？

Answer 1

"我有一个问题，多个选项的option.value可以相同，但option.info不同；。

然后你就不能使用垫子单选按钮了。更重要的是，你永远不知道你点击了什么值。我必须假设你有一系列的选择

//"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,info:'one'},{value:102,info:'two'},{value:201,info:'one bis'}]

//或

optionsValors=this.options.map((x,index)=>
({value:index*100+x.value,info:x.info}))

记住，如果您想要"；实际价值；

value=value%100

如果你的options.value是字符串，你可以做一些类似的添加字母和使用子字符串

注意：我假设您希望将选项的值存储在一个变量中。记住，这是Angular！！那么，为什么不使用[(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>

Answer 2

我的选项对象也有一个名为id的键。对于数组中的所有对象，id并没有设置为唯一。(这是我的失误。(所以当我为数组中的每个对象设置唯一的id时。它奏效了。我正在使用mat单选按钮中的event/api来处理选择。因此，我不必使用ngModel。(但这是一个好的做法吗！！？但这个棱角分明的项目的建筑设计却大不相同。不同的问题。(

但我仍然有一种无法解释的行为。我没有用任何方法告诉mat单选按钮关于id。那么这是怎么给它带来问题的。也许[value]而不是[ngValue]在DOM或mat单选键的内部工作中造成了问题，但我仍然在使用[value]，不知何故，一个唯一的密钥'id'解决了这个问题。