btn-group - btnRadio 初始值由枚举完成，不激活按钮

Question

我有以下 btn-group：

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

可以看到type的初始值是 MyType.A因此我希望第一个按钮处于活动状态，但事实并非如此。

我预计：

我有：

Answer 1

您必须将“active”类添加到标签之一：

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