默认选择角度材料2按钮切换

Ota*_*uzo 12 angular-material angular

在角度材质2中,如何在切换组中设置默认选定按钮.

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

  <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>
Run Code Online (Sandbox Code Playgroud)

Qui*_*d23 20

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

<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>
Run Code Online (Sandbox Code Playgroud)


小智 8

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

<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>
Run Code Online (Sandbox Code Playgroud)