时间戳

首页 > 解决方案 > Ngx-bootstrap 的无线电组在加载时不会绑定到选定的值

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

问题描述

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

我尝试在类和 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

标签： angularangular-ngmodelngx-bootstrap

解决方案

尝试使用属性绑定（[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>

这是您参考的工作示例 StackBlitz。

推荐阅读