选中的属性在Mat单选按钮中不起作用

时间:2019-02-06 13:07:01

标签: angular-material angular7

我正在创建一个带有选中属性的单选按钮,但未显示为选中状态

<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio" [ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
<mat-radio-button value="own" checked name="own">Own</mat-radio-button>
<mat-radio-button value="competitor" name="own">competitor</mat-radio-button> </mat-radio-group>

我希望默认选中第一个单选按钮

1 个答案:

答案 0 :(得分:0)

如果使用 <Button x:Name="btnNewItem" Command="{Binding Path=NewItemCommand}" HorizontalAlignment="Left" Margin="10,10,0,0"> <StackPanel Orientation="Horizontal"> <Image Value="/Resources/Bitmaps/Add.png"/> <TextBlock VerticalAlignment="Center" Text="Button text" /> </StackPanel> </Button> ,则需要将单选按钮的 value 传递给ngModel

ngModel

和ts文件

<mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio" 
   [ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
  <mat-radio-button value="own" name="own">Own</mat-radio-button>
  <mat-radio-button value="competitor" name="own">competitor</mat-radio-button> 
</mat-radio-group>

或动态填充

 selectedRadio = 'own'; //default value

 radioChange(e){
   console.log(this.selectedRadio)
 }

ts文件

 <mat-radio-group name="radioOpt1" [(ngModel)]="selectedRadio"
    [ngModelOptions]="{standalone: true}" (change)="radioChange($event)">
   <mat-radio-button *ngFor="let but of list" [value]="but.id" name="own" >
      {{but.name}}
   </mat-radio-button>
 </mat-radio-group>