如何在角度材料表中按行对 mat-radio-button 进行分组答案

【问题标题】：How to group mat-radio-button row wise in angular material tabel如何在角度材料表中按行对 mat-radio-button 进行分组
【发布时间】：2019-01-02 04:09:29
【问题描述】：

通常角度材料表按列分组单选按钮，如何实现按行分组？

【问题讨论】：

标签： html angular5 angular2-forms angular-material-5

【解决方案1】：

根据广播组中的angular material documentation，它声明

单选按钮通常应放置在 <mat-radio-group> 除非 DOM 结构可以做到这一点不可能（例如，表格单元格内的单选按钮）。

因此，如果您希望每行有一个单选按钮组，那么您只需使用 name 属性将这些控件组合在一起（与 HTML 输入 type="radio" 完全相同）。

<tr>
  <td></td>
  <td>
    <p>Escalation Teams</p>
  </td>
  <td>
    <mat-radio-button value="1" name="escalationTeam"></mat-radio-button>
  </td>
  <td>
    <mat-radio-button value="2" name="escalationTeam"></mat-radio-button>
  </td>
</tr>

See my Stackblitz example如下图：

请注意，对于每一行，您一次只能检查一个收音机

【讨论】：

【解决方案2】：

我不明白你想做什么。您想要在单个表格单元格中包含一列单选按钮，还是在同一列中各有一个单选按钮的多行（这似乎不太可能）？该图在同一行的不同数据列中显示单选按钮。您不能在单个视图列和行中出现多个数据列，因此您需要一个包含所选选项的单个数据列，并且该单元格的视图以垂直格式布置各种单选选项。这是一个stackblitz 示例。

【讨论】：

谢谢你的例子，我想我可以利用它，只需要俱乐部专栏。我的要求是能够连续单击一个单选按钮..这在我发布的图片中没有发生。
如果我明白你在说什么，在不同的 data 列中不可能有单选按钮属于同一个单选组，所以你必须伪造在单列中布局。我的示例显示了列布局 - 将其更改为行并删除单选按钮标签，然后还修改列标题以提供每个单选按钮的标签。