Question

我有以下问题：

我在多个表中显示我的数据。这些表是动态生成的，元素的数量可以变化。每行有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>

Answer 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。

每列创建一个单选按钮组

1 个答案: