2017-03-18 13 views
7

角度材料2、どのようにトグルグループのデフォルトの選択ボタンを設定できますか?角度材料2ボタントグルがデフォルトで選択されています

タップを1回タップしますが、どちらもデフォルトで選択されています。 次のように試しましたが、うまくいきません。

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

答えて

12

各ボタンに値を割り当ててから、グループに初期値(ボタンの1つに一致する)を割り当てる必要があります。

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

私は材料の初心者ですが、これはうまくいくはずです。 ngModelは2つの値 "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> 
関連する問題