Создать группу переключателей для каждого столбца

Question

У меня следующая проблема:

Я отображаю свои данные в нескольких таблицах.Таблицы генерируются динамически, и количество элементов может варьироваться.Каждая строка имеет 4 столбца:

• один для «некоторого элемента»
• одна радиокнопка для x
• одна радиокнопка для y
• одна радио-кнопка для z

Я хочу знать, возможно ли сгруппировать все радио-кнопки в каждом столбце.Это должно работать для всех таблиц, так что я получаю только одно значение для каждого столбца (пользователь должен иметь возможность активировать только одну радиокнопку для каждого столбца).

Ниже вы можете увидеть пример для моего столбца.данные и HTML-код.Или, если вы хотите попробовать сами: Пример StackBlitz

Я должен работать с 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>

См. этот стек для демонстрации.