如何在有角材料表中按行对Mat-radio-button行进行分组

Question

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

Answer 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如下所示：

请注意，对于每一行，您一次只能检查一个无线电

Answer 2

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