javascript - 在一页上有多个 mat-button-toggle-groups

Question

我有几个按钮组，但它们似乎都共享相同的值。这似乎是因为它们都分配给了同一个#group，但如果我尝试将它们分配给当前组以外的任何其他组，我会收到错误消息。

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

此外，我对(更改)事件有疑问

public OnToggleChanged() {
        this.PieChartSource = this.CollectionByType[this.TableType];
        this.EndTime = this.GetEndTIme();

        if (this.TableType != 'Trader' && this.TableType != 'Source') {
            this.ViewTradesEnabled = false;
            this.TradeViewMode = 'Hide';
        }

        this.GetSlippage();
    }

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

Answer 1

我有一个工作 example here . 查看控制台日志以了解 group.value 的工作原理。

mat-button-toggle-group 的名称与值的变化无关。重要的是每个组都绑定(bind)到不同的变量。另外，给每个组自己的 id。他们不能都是“#group”

像这样:

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