如何使用 ngModel 控制值绑定的类型（数字被扭曲为字符串）？

Question

我问 a question 并得到它的工作。但是，我注意到尽管提供的数据由这样声明的对象组成：

export interface GisPoint { e: number; n: number; }

当用户输入一个值时，原来的内容是 { e: 12, n: 34 } 变成字符串，即 { e: " 123", n: 34}。我知道输入的结果将被假定为一个字符串，所以我必须转换它。但是，随着绑定通过 ngModel，我实际上并没有对 keyUp 或 blur 做出明确的反应.

我必须明确地这样做吗？如果是这样，那么使用 ngModel 真的毫无意义。如果能够在输入编辑值时保留类型，那就太好了。

Answer 1

您可以为组件实现 ControlValueAccessor 接口，以便指定哪个值代表模型。

这里有几篇不错的文章可以作为起点：

Answer 2

鉴于此 HTML 标记：

<input type="number" [(ngModel)]="data.age">

您将在模型中获得所需的数字。 Angular 不会将其转换为字符串。一个 "side effect" 是浏览器将添加这些数字微调器。

隐藏它们的最简单方法是使用 css 小规则：

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

有关 css here and here 的更多信息。

检查此工作 stackblitz。

如何使用 ngModel 控制值绑定的类型（数字被扭曲为字符串）？

How to control the type of value bound using ngModel (number gets distorted to string)?

typescript

ngmodel

angular