在 mat-radio-group 中选择了多个 mat-radio-button答案

【问题标题】：Multiple mat-radio-button selected in mat-radio-group在 mat-radio-group 中选择了多个 mat-radio-button
【发布时间】：2020-12-01 21:29:56
【问题描述】：

`<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。这些解决方案没有解决它。

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： angular typescript angular-material radio-button radio-group

【解决方案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 是字符串，你可以做一些类似的添加字母并使用 substr

注意：我想您想将选项的值存储在变量中。请记住，这是 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>

【讨论】：

我有一个问题。我同意我的选项对象中的值不是唯一的。但是由于我将值属性与选项对象绑定，这是否意味着我将唯一对象绑定到该值。 mat-radio-button 是否在内部跟踪其自身的值键？如果我的选项对象根本没有名为 value 的键怎么办？在那种情况下呢？还是因为我使用 option.value 作为显示的键？在那种情况下，使用任何类型的地图都会返回相同的结果吗？
对不起，我以为你在使用 [value]="option.id" ::glubs:: 如果你想给一个对象作为值，使用 [ngValue] 比 [value] (我认为这是问题所在），是的，你是对的（为我的错误道歉）。

【解决方案2】：

我的选项对象也有一个名为 id 的键。对于数组中的所有对象，ID 未设置为唯一。（我身边的一个小姐。）所以当我为数组中的每个对象设置唯一的 id 时。有效。我正在使用来自 mat-radio-button 的事件/api 来处理选择。因此，我不必使用 ngModel。（但这是一个好的做法吗！！？？但是这个有角度的项目的建筑设计是完全不同的。不同的问题。）

但我仍然有一个无法解释的行为。我没有使用任何方式告诉 mat-radio-button id。那么这如何给它带来问题。也许 [value] 而不是 [ngValue] 导致 DOM 或 mat-radio-button 的内部工作出现问题，但我仍在使用 [value] 并且以某种方式唯一的键 'id' 解决了它。

【讨论】：