angular material 2 按钮切换默认选中

angular material 2 button toggle by default selected

在angular材料 2 中,如何在切换组中设置默认选定按钮。

一旦我点击一个,它就会切换,但默认情况下都会以某种方式选中。
我尝试如下,但不起作用。

1
2
3
4
5
6
7
8
  <md-button-toggle-group #group="mdButtonToggleGroup">
    <md-button-toggle (click)="firstTapped()" selected>
      <span>one</span>
    </md-button-toggle>
    <md-button-toggle (click)="secondTapped()">
      <span>second</span>
    </md-button-toggle>
  </md-button-toggle-group>

您需要为每个按钮分配一个值,然后您可以给组一个初始值(匹配其中一个按钮);

1
2
3
4
5
6
7
8
<md-button-toggle-group #group="mdButtonToggleGroup" value="button1">
    <md-button-toggle value="button1">
      <span>one</span>
    </md-button-toggle>
    <md-button-toggle value="button2">
      <span>second</span>
    </md-button-toggle>
  </md-button-toggle-group>

我只是材料的初学者,但这应该可以。您可以将 ngModel 与可以有两个值 "one"、"two" 的变量一起使用。您可以使用"yourFunction"观察变化。

1
2
3
4
5
6
7
8
<md-button-toggle-group (ngModelChange)="yourFunction($event)" [ngModel]="selected">
 <md-button-toggle value="one">
  <span>one</span>
 </md-button-toggle>
 <md-button-toggle value="two">
  <span>second</span>
 </md-button-toggle>
</md-button-toggle-group>


使用选中而不是选中,例如:

1
<md-button-toggle (click)="firstTapped()" checked>