在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'解决了它。