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

【问题标题】：Angular material multiple mat-radio-group with same name/field具有相同名称/字段的角材料多个 mat-radio-group
【发布时间】：2019-04-06 05:35:25
【问题描述】：

我正在使用角度材料 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 的 stackblitz。

【问题讨论】：

如果您必须使用表格作为按钮，您可以尝试在 mat-radio-group 中围绕表格
行在循环中。所以每行我需要一个值。所以我不能在 mat-radio-group 中环绕桌子
或者，查看添加在 tr 周围的答案
这将完全破坏设计如果我在其他 td 中有其他控件怎么办
好吧，如果您不能将它们作为直接后代，我认为您无法使用提供的 API 来实现这一点。

标签： angular angular-material2 radiobuttonlist angular-material-7

【解决方案1】：

使用下面的代码

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

【讨论】：

我们不能这样打破桌子。在我的 stackblitz 中尝试一下，它会完全破坏设计。如果我在其他 td 中有其他控件怎么办？
我知道兄弟，但你使用不同的无线电组，所以我认为不可能让两个无线电组使用相同的值。如果可能，我会尝试检查其他解决方案

【解决方案2】：

我们有这个很酷的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

【讨论】：

但是如果使用ngProjectAs可以绑定formControlName吗？怎么样？

【解决方案3】：

您不必使用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

【讨论】：