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

在此函数上方。TableType是未定义的，我不了解，因为该切换应将其设置为选定值。

Answer 1

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

mat-button-toggle-group的名称与值更改无关紧要。重要的是每个组都绑定到一个不同的变量。另外，给每个组自己的ID。他们不能都是“ #group”

类似：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>

<h4>Or choose from popular search terms: </h4>
<div class="row">
  <button type="button">term1</button>
  <button type="button">term2</button>
  <button type="button">term3</button>
  <button type="button">term4</button>
  <button type="button">term5</button>
  <button type="button">term6</button>
  <button type="button">term7</button>
  <button type="button">term8</button>
  <button type="button">term9</button>
  <button type="button">term10</button>
</div>

<hr>
<div class="row">
  <div class="column">
    <div class="topic">
      <input type="checkbox" id="topic1" />
      <label for="topic1">Topic 1</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic2" />
      <label for="topic2">Topic 2</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic3" />
      <label for="topic3">Topic 3</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic4" />
      <label for="topic4">Topic 4</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic5" />
      <label for="topic5">Topic 5</label>
    </div>
  </div>
  <div class="column">
    <div class="topic">
      <input type="checkbox" id="topic6" />
      <label for="topic6">Topic 6</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic7" />
      <label for="topic7">Topic 7</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic8" />
      <label for="topic8">Topic 8</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic9" />
      <label for="topic9">Topic 9</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic10" />
      <label for="topic10">Topic 10</label>
    </div>
  </div>
  <div class="column">
    <div class="topic">
      <input type="checkbox" id="topic11" />
      <label for="topic11">Topic 11</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic12" />
      <label for="topic12">Topic 12</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic13" />
      <label for="topic13">Topic 13</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic14" />
      <label for="topic14">Topic 14</label>
    </div>
    <br/>
    <div class="topic">
      <input type="checkbox" id="topic15" />
      <label for="topic15">Topic 15</label>
    </div>
  </div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
  <img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
  <img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
  <img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
  <img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
  <img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
  <img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
  <img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
  <img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>

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

1 个答案: