Angular 具有相同名称/字段的角材料多垫无线电组

我用的是有棱角的材料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>

这是我的问题。

使用下面的代码

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

物质的
父系的
物质的
彼得纳尔

使用下面的代码

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

物质的
父系的
物质的
彼得纳尔
我们在
ng容器
上使用了这个很酷的
ngProjectAs
，它不会破坏您的css。因此，我们可以为容器投影
mat无线电组
，我们将其环绕
tr
：



您的
我们有这个很酷的
ngProjectAs
用于
ng容器
，它不会破坏您的css。因此，我们可以为容器投影
mat无线电组
，我们将其环绕
tr
：



您的
不强制要求您使用
mat无线电广播组。相反，您可以使用
mat单选按钮的
名称
输入。接下来的挑战是如何访问“组”值。为此，您可以手动管理无线电更改

本例假设您的行具有某种数据结构：

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


母亲的
父系的
价值
{{values[row].value}
导出类RadioOverview示例{
selectedValue:string=“meternal”；
selectedValue1:string=“meternal1”；
行=['1'、'2'、'3']；
值={}；
恩戈尼尼特（）{
this.rows.forEach（row=>{
this.values[row]={value:'mothermal'}；
})
}
放射性变化（事件）{
this.values[event.source.name].value=event.value；
}
}

您不必使用
mat收音机组
。相反，您可以使用
mat单选按钮的
名称
输入。接下来的挑战是如何访问“组”值。为此，您可以手动管理无线电更改

本例假设您的行具有某种数据结构：

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


母亲的
父系的
价值
{{values[row].value}
导出类RadioOverview示例{
selectedValue:string=“meternal”；
selectedValue1:string=“meternal1”；
行=['1'、'2'、'3']；
值={}；
恩戈尼尼特（）{
this.rows.forEach（row=>{
this.values[row]={value:'mothermal'}；
})
}
放射性变化（事件）{
this.values[event.source.name].value=event.value；
}
}

如果必须使用表格来设置按钮，可以尝试在mat单选组Rows in loop中环绕表格。所以每行我需要一个值。所以我不能在mat radio groupOr中环绕表，看到围绕tr添加的答案，这将完全破坏设计，如果我在其他tdWell中有其他控件怎么办？如果您不能将它们作为直接子体，我认为您无法通过提供的API实现这一点。如果您必须使用表作为按钮，您可以尝试在mat radio groupRows中环绕桌子。所以每行我需要一个值。所以我不能在mat radio groupOr中环绕表，看到围绕tr添加的答案，这将完全破坏设计，如果我在其他tdWell中有其他控件，会怎么样？如果您不能将它们作为直接后代，我认为您无法使用提供的API实现这一点。我们不能像这样拆分表。在我的stackblitz中尝试一下，它将完全打破设计。如果我在其他td中有一些其他控件呢？我知道兄弟，但你们使用的是不同的无线电组，所以我认为不可能给两个无线电组使用相同的值。如果可能的话，我会尝试检查另一个解决方案。我们不能像这样打破表格。在我的stackblitz中尝试一下，它将完全打破设计。如果我在其他td中有一些其他控件呢？我知道兄弟，但你们使用的是不同的无线电组，所以我认为不可能给两个无线电组使用相同的值。如果可能，我会尝试检查另一个解决方案，但如果使用ngProjectAs，是否可以绑定formControlName？如何绑定？但是如果使用ngProjectAs，可以绑定formControlName吗？怎么用？