Угловой материал множественная мат-радиогруппа с тем же именем / полем

Question

Я использую угловой материал 7.

Я использую группу радиокнопок .

У меня есть дизайн стола , который ядолжен использовать.Так что это исправлено.

Когда я пытаюсь использовать радиокнопки в td , я не уверен, что могу дать ту же группу.

ниже - мой html.

<tr>
      <td>
        <mat-radio-group >
          <mat-radio-button value="maternal"></mat-radio-button>
        </mat-radio-group>
      </td>
      <td>
        <mat-radio-group >
          <mat-radio-button value="paternal"></mat-radio-button>
        </mat-radio-group>
      </td>
    </tr>

Вот стеклитц моего выпуска https://stackblitz.com/edit/angular-tt2kep-woea34.

Answer 1

У нас есть этот крутой ngProjectAs для использования на ng-container, который не сломает ваш CSS. Таким образом, мы можем спроектировать mat-radio-group для контейнера, который мы обертываем вокруг tr:

<ng-container ngProjectAs="mat-radio-group">
  <tr>
    <td>
      <mat-radio-button value="maternal"></mat-radio-button>
    </td>
    <td>
      <mat-radio-button value="paternal"></mat-radio-button>
    </td>
  </tr>
</ng-container>

Ваш StackBlitz

Answer 2

Не обязательно использовать mat-radio-group. Вместо этого вы можете использовать вход name для mat-radio-button. Тогда возникает проблема, как получить доступ к значению «группа». Для этого вы можете вручную управлять изменениями радио.

Этот пример предполагает некоторую структуру данных для ваших строк:

<table style="width:100%; text-align:left;">
  <thead>
    <th>Maternal</th>
    <th>Paternal</th>        
    <th>Value</th>
  </thead>
  <tbody>
    <ng-container *ngFor="let row of rows">
      <tr>
        <td>
            <mat-radio-button value="maternal" [name]="row" (change)="radioChange($event)" checked="true"></mat-radio-button>
        </td>
        <td>
            <mat-radio-button value="paternal" [name]="row" (change)="radioChange($event)"></mat-radio-button>
        </td>
        <td>
            {{ values[row].value }}
        </td>
      </tr>
    </ng-container>
  </tbody>
</table>

export class RadioOverviewExample {
  selectedValue:string="meternal";
  selectedValue1:string="meternal1";
  rows = ['one', 'two', 'three'];
  values = {};

  ngOnInit() {
    this.rows.forEach(row => {
      this.values[row] = { value: 'maternal' };
    })
  }

  radioChange(event) {
    this.values[event.source.name].value = event.value;
  }
}

https://stackblitz.com/edit/angular-tt2kep-h6pjiy?file=app%2Fradio-overview-example.html

Answer 3

Используйте код ниже

    <table style="width:100%; text-align:left;">
  <thead>
    <th>Meternal</th>
    <th>Paternal</th>
  </thead>
  <tbody>
    <mat-radio-group >
    <tr>

      <td>

          <mat-radio-button value="maternal">Meternal</mat-radio-button>

      </td>
      <td>
          <mat-radio-button value="paternal">Peternal</mat-radio-button>

      </td>

    </tr>
    </mat-radio-group>
  </tbody>
</table>