每列创建一个单选按钮组答案

【问题标题】：Create a radio button group per column每列创建一个单选按钮组
【发布时间】：2018-09-20 03:41:32
【问题描述】：

我有以下问题：

我在多个表格中显示我的数据。表格是动态生成的，元素的数量可能会有所不同。每行有 4 列：

一个用于“某些项目”
x 的一个单选按钮
y 的一个单选按钮
z 的一个单选按钮

我想知道是否可以对每个单选按钮进行分组柱子。这应该适用于所有表，所以我只得到一个值对于每一列（用户应该只能激活每列一个单选按钮）。

在下面您可以看到我的数据和 html 代码的示例。或者，如果您想自己尝试一下： StackBlitz example

我必须使用 Angular 5 和 Angular-Material。先感谢您。

  data = [
    {
      name: 'foo',
      groups: [
        { name: 'group1', axes: ['some item', 'some item', 'some item'] },
        { name: 'group2', axes: ['some item'] },
        { name: 'group3', axes: ['some item', 'some item'] }
      ]
    },
    {
      name: 'bar',
      groups: [
        { name: 'group1', axes: ['some item', 'some item'] },
        { name: 'group2', axes: ['some item', 'some item', 'some item'] },
        { name: 'group3', axes: ['some item', ] }
      ]
    }
  ];

<div *ngFor="let item of data">
	<h2>{{ item.name }}</h2>

	<div *ngFor="let group of item.groups">
		<strong>{{group.name}}</strong>
		<table border="1">
			<tr>
				<td></td>
				<td>x</td>
				<td>y</td>
				<td>z</td>
			</tr>

			<tr *ngFor="let elem of group.axes">
				<td>{{elem}}</td>
				<td><mat-radio-button></mat-radio-button></td>
				<td><mat-radio-button></mat-radio-button></td>
				<td><mat-radio-button></mat-radio-button></td>
			</tr>

		</table>
	</div>

</div>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

单选按钮根据其name 属性进行分组。为了按列对它们进行分组，请为单选按钮指定一个特定于每一列的name：

<tr *ngFor="let elem of group.axes">
  <td>{{elem}}</td>
  <td><mat-radio-button name="groupX"></mat-radio-button></td>
  <td><mat-radio-button name="groupY"></mat-radio-button></td>
  <td><mat-radio-button name="groupZ"></mat-radio-button></td>
</tr>

请参阅this stackblitz 以获取演示。

【讨论】：