- 列挙によって行わbtnRadio初期値、ボタン

Question

を活性化しない私は、BTN-グループを次ています

<div class="btn-group"> 
     <label class="btn btn-primary" [(ngModel)]="type" btnRadio="{{myType.A}}" name="A" ngDefaultControl>A</label> 
     <label class="btn btn-primary" [(ngModel)]="type" btnRadio="{{myType.B}}" name="B" ngDefaultControl>B</label> 
</div> 

がMyTypeが列挙型である：

export enum MyType { 
    A, B 
} 

、ここでは、コンポーネントです：

@Component({ 
    selector: 'add-record', 
    templateUrl: './add-record.component.html', 
    styleUrls: ['./add-record.component.css'] 
}) 
export class AddRecordComponent implements OnInit { 

    type: MyType; 
    myType = MyType; 

    constructor() { } 

    ngOnInit() { 
    this.type = MyType.A; 
    } 
} 

あなたが見ることができるようにタイプの初期値はMyType.Aあるので、 私は最初のボタンがアクティブになると思いますが、そうではありません。

私は期待して：

私が持っている：

Answer 1

あなたはラベルの1つに "アクティブ" クラスを追加する必要があります：

<div class="btn-group"> 
    <label class="btn btn-primary" [(ngModel)]="type" [class.active]="type=myType.A" btnRadio="{{myType.A}}" name="A" ngDefaultControl>A</label> 
    <label class="btn btn-primary" [(ngModel)]="type" [class.active]="type=myType.B" btnRadio="{{myType.B}}" name="B" ngDefaultControl>B</label> 
</div>