angular - 具有相同名称/字段的角材料多个 mat-radio-group

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>