Javascript 在一个页面上有多个mat按钮切换组

我有几个按钮组，但它们似乎彼此共享相同的值。这似乎是因为他们都被分配到同一个组，但如果我试图将他们分配到当前组以外的任何组，我会得到一个错误

<div class="options">
            <span class="option-left">
                <mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Font Style" [(value)]="TableType" (change)="OnToggleChanged(group.value)">
                    <mat-button-toggle value="Trader">Trader</mat-button-toggle>
                    <mat-button-toggle value="Source">Source</mat-button-toggle>
                    <mat-button-toggle value="Shift">Shift</mat-button-toggle>
                    <mat-button-toggle value="Product">Product</mat-button-toggle>
                    <mat-button-toggle value="RiskLevel">Risk</mat-button-toggle>
                </mat-button-toggle-group>
            </span>
            <span>
                <mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Font Style" [(value)]="TradeViewMode">
                    <mat-button-toggle (click)="ViewTrades()" value="Show">View Trades</mat-button-toggle>
                    <mat-button-toggle (click)="HideTrades()" value="Hide">Hide Trades</mat-button-toggle>
                </mat-button-toggle-group>
            </span>
            <span class="option-right">
                <mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Font Style" [(value)]="NumberType" (change)="NumberTypeValueChanged(group.value)">
                    <mat-button-toggle value="percent">Percent</mat-button-toggle>
                    <mat-button-toggle value="currency">Dollars</mat-button-toggle>
                </mat-button-toggle-group>
            </span>
        </div>

在上面的函数中，此.TableType未定义，我不理解，因为切换应该将其设置为所选值。

我有一个工作模式。查看控制台日志以了解group.value的工作方式

mat按钮切换组的名称与值更改无关。重要的是，每个组都绑定到一个不同的变量。另外，给每个组分配自己的id。它们不能都是“组”

像这样：

<mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Table Type" [(value)]="TableType" (change)="OnToggleChanged(group.value)">
  <mat-button-toggle value="Trader">Trader</mat-button-toggle>
  <mat-button-toggle value="Source">Source</mat-button-toggle>
  <mat-button-toggle value="Shift">Shift</mat-button-toggle>
  <mat-button-toggle value="Product">Product</mat-button-toggle>
  <mat-button-toggle value="RiskLevel">Risk</mat-button-toggle>
</mat-button-toggle-group>
<br>
<br>
<mat-button-toggle-group #group2="matButtonToggleGroup" aria-label="Trade View" [(value)]="TradeViewMode" (change)="OnToggleChanged(group2.value)">
  <mat-button-toggle (click)="ViewTrades()" value="Show">View Trades</mat-button-toggle>
  <mat-button-toggle (click)="HideTrades()" value="Hide">Hide Trades</mat-button-toggle>
</mat-button-toggle-group>
<br>
<br>
<mat-button-toggle-group #group3="matButtonToggleGroup" aria-label="Number Type" [(value)]="NumberType" (change)="OnToggleChanged(group3.value)">
  <mat-button-toggle value="percent">Percent</mat-button-toggle>
  <mat-button-toggle value="currency">Dollars</mat-button-toggle>
</mat-button-toggle-group>

<pre>
  TableType: {{TableType}}
  TradeViewMode: {{TradeViewMode}}
  NumberType: {{NumberType}}
</pre>

交易者
来源
移位
产品
风险




查看交易
隐藏交易




百分比
美元
TableType:{{TableType}
TradeViewMode:{{TradeViewMode}}
NumberType:{{NumberType}

“他们当前的组我有一个错误”，那么，错误是什么？就是找不到我更改的组。但我不再使用基于你下面答案的分组。太棒了，谢谢。在切换更改之后，除了（更改）之外，还有其他方法进行组件处理吗？您必须详细说明组件处理的含义。但是如果你想在切换点击时触发同一组件内的更改，那么（更改）事件就是你的朋友。我刚刚用我所说的更新了原始帖子。我看到的（更改）事件中未定义this.TableType。在这种情况下，继续并通过小组回到那里。你的问题是你所有的小组都是同一个id。我正在用一个新的stackblitz更新我的答案

<mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Table Type" [(value)]="TableType" (change)="OnToggleChanged(group.value)">
  <mat-button-toggle value="Trader">Trader</mat-button-toggle>
  <mat-button-toggle value="Source">Source</mat-button-toggle>
  <mat-button-toggle value="Shift">Shift</mat-button-toggle>
  <mat-button-toggle value="Product">Product</mat-button-toggle>
  <mat-button-toggle value="RiskLevel">Risk</mat-button-toggle>
</mat-button-toggle-group>
<br>
<br>
<mat-button-toggle-group #group2="matButtonToggleGroup" aria-label="Trade View" [(value)]="TradeViewMode" (change)="OnToggleChanged(group2.value)">
  <mat-button-toggle (click)="ViewTrades()" value="Show">View Trades</mat-button-toggle>
  <mat-button-toggle (click)="HideTrades()" value="Hide">Hide Trades</mat-button-toggle>
</mat-button-toggle-group>
<br>
<br>
<mat-button-toggle-group #group3="matButtonToggleGroup" aria-label="Number Type" [(value)]="NumberType" (change)="OnToggleChanged(group3.value)">
  <mat-button-toggle value="percent">Percent</mat-button-toggle>
  <mat-button-toggle value="currency">Dollars</mat-button-toggle>
</mat-button-toggle-group>

<pre>
  TableType: {{TableType}}
  TradeViewMode: {{TradeViewMode}}
  NumberType: {{NumberType}}
</pre>