无法使用单选按钮输入数字

Question

下面显示字符串值有效，但是如果我输入的是数字，则无效。除了将变量设置为字符串外，还有其他想法吗？

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

@Component({
    selector: 'my-app',
    template: `
    <p>Model: {{model | json}}</p>
    NOT WORKING<br/>
      <input type="radio" name="foo" value="1" [(ngModel)]="model.foo" kendoRadioButton />
      <input type="radio" name="foo" value="2" [(ngModel)]="model.foo" kendoRadioButton />
      <input type="radio" name="foo" value="3" [(ngModel)]="model.foo" kendoRadioButton />

    <br/>
      WORKING<br/>
      <input type="radio" name="bar" value="1" [(ngModel)]="model.bar" kendoRadioButton />
      <input type="radio" name="bar" value="2" [(ngModel)]="model.bar" kendoRadioButton />
      <input type="radio" name="bar" value="3" [(ngModel)]="model.bar" kendoRadioButton />

    `
})
export class AppComponent {
    public model = {
        foo: 3,
        bar: "2"
    };
}

Answer 1

代替使用[(ngModel)]进行双向绑定，您可以通过对设置进行字符串化并处理change事件来自己实现双向绑定。

数字类型的每个输入应如下所示：

<input type="radio" name="foo" value="1" kendoRadioButton
  [ngModel]="model.foo.toString()" 
  (ngModelChange)="onFooChanged($event)" />

您的组件中的事件处理程序将如下所示：

onFooChanged(value) {
  this.model.foo = parseInt(value);
}

[不知道[(ngModel)]在幕后发生了什么，我认为它正在对布尔类型（例如单选按钮）进行严格的相等性检查。

DEMO：https://stackblitz.com/edit/angular-w3xwmx