Ngx-bootstrap 的无线电组不会在加载时绑定到选定值

Question

我的 ngx-bootstrap 单选按钮工作正常并绑定到 selectedValue，除非页面首次加载。虽然 selectedValue 被初始化，但当页面第一次加载时 ngModel 不会绑定它。

我已经尝试在 class 和 OnInit() 中初始化 selectedValue 成员，希望这是一个操作顺序问题，但是当页面加载时 ngModel 仍然不会绑定。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'demo-buttons-radio',
  templateUrl: './radio.html'
})
export class DemoButtonsRadioComponent implements OnInit {
  radioModel = 'Left';

  selectedValue: number = 0;

  familyValues: number[] = [ 0, 1, 2, 3, 4 ];

  ngOnInit() {
    this.selectedValue = 0;
  }
}

这是我的 HTML：

<pre class="card card-block card-header">{{selectedValue || 'null'}}</pre>
<div class="btn-group">
       <label class="btn btn-primary" [(ngModel)]="selectedValue" btnRadio="0" tabindex="0" role="button">0</label>
       <label class="btn btn-primary" [(ngModel)]="selectedValue" btnRadio="1" tabindex="0" role="button">1</label>
       <label class="btn btn-primary" [(ngModel)]="selectedValue" btnRadio="2" tabindex="0" role="button">2</label>
       <label class="btn btn-primary" [(ngModel)]="selectedValue" btnRadio="3" tabindex="0" role="button">3</label>
       <label class="btn btn-primary" [(ngModel)]="selectedValue" btnRadio="4" tabindex="0" role="button">4</label>
</div>


<div class="btn-group" *ngFor="let value of familyValues;" btnRadioGroup [(ngModel)]="selectedValue">
       <label class="btn btn-success" btnRadio="{{value}}" tabindex="0" role="button">{{value}}</label>
</div>

ngx-bootstrap 演示有效，如选择的初始按钮所示。难道是 ng-model 不喜欢整数？

https://angular-je8xrf.stackblitz.io

Answer 1

尝试使用属性绑定([btnRadio]="value")

<label 
  class="btn btn-primary" 
  [(ngModel)]="selectedValue" 
  [btnRadio]="value" 
  tabindex="0"
  role="button">
  {{value}}
</label>

代替字符串插值(btnRadio="{{ value }}")

<label 
  class="btn btn-primary" 
  [(ngModel)]="selectedValue" 
  btnRadio="{{value}}" 
  tabindex="0"
  role="button">
  {{ value }}
</label>

Here's a Working Sample StackBlitz for your ref.

Ngx-bootstrap 的无线电组不会在加载时绑定到选定值

Ngx-bootstrap's radio group wont bind to selected value on load

angular-ngmodel

ngx-bootstrap

angular