Angular4 ngModel 将数据类型从"数字"更改为"字符串"

Question

我有一个 Angular4 应用程序，可以从表单捕获数据并存储在 DynamoDB 中。 它使用 ngModel 支持双向数据绑定，在显示屏上看起来都不错。 由于输入字段键入为绑定到打字稿"数字"字段的"文本"，因此问题开始发挥作用。 似乎正在将对象值的类型更改为"字符串"。 我只是将 HTML 输入类型更改为"数字"，除了表单字段上不必要和不需要的递增/递减装饰器(隐藏它们似乎支持有限)。 所以我很好奇是否有另一种方法可以根据需要保持数据结构的类型......如果这是 ngModel 中的一个错误... 或者如果输入类型只需要"数字"。

我的 sample.component.ts 文件中的结构如下所示：

export class Course {
Id: number;
Name: string;
}
...
courseInstance: Course;
saveCourse() {
JSON.stringify(this.courseInstance);
}

我的 sample.component.html 文件如下所示：

<div>
<label for="courseid">Course ID: </label>
<input type="text" class="form-control"[(ngModel)]="courseInstance.Id" name="courseid">
</div>
<div>
<label for="courseName">Course Name: </label>
<input type="text"  class="form-control"[(ngModel)]="courseInstance.Name" name="courseName">
</div>
<div>
<button type="button" class="btn btn-info btn-lg" (click)="saveCourse()">Save</button>
</div>

JSON.stringify(this.courseInstance)的输出结果如下

{"Id":"100","Name":"Test course"}

请注意，值 100 表示为字符串。

如果我不使用表单，而只是创建一个实例，例如

courseInstance: Course = {
Id: 100,
Name: 'Test course'
};

然后在输出 JSON.stringify(课程实例)的结果时; 我得到

{"Id":100,"Name":"Test course"}

如果我尝试使用 PutItem 在 DynamoDB 中存储对象，则当数据来自 HTML 表单时，Id 值将失败类型检查。

我本以为打字稿中的输入会优先于HTML"文本"输入类型。

Answer 1

将类型text更改为number，以使类型number并且不要让写字母。

<input type="number" class="form-control"[(ngModel)]="courseInstance.Id" name="courseid">

Answer 2

>[(ngModel)]语法只能设置数据绑定属性。如果您需要做更多或不同的事情，您可以编写扩展表单。

<div>
<label for="courseid">Course ID: </label>
<input type="text" #ref class="form-control" [ngModel]="courseInstance.Id" (ngModelChange)="onDataChange(ref.value)"name="courseid">
</div>

ngModeldata 属性设置元素的值属性，ngModelChange事件属性侦听对元素值的更改。使用 parseInt 获取所需的结果。
ngModelChange将在您需要去抖动值的每次击键时触发，否则每次击键都会发出事件，要去抖动值，您可以使用带有debounceTime()运算符的Subject。subject既是observable，也是observer。这意味着您可以将其视为可观察量，并将值传递给它。除此之外，使用模板引用变量

在您的组件中

import { Subject } from 'rxjs/Subject';
import {debounceTime } from 'rxjs/operators
debouncer= new Subject();
constructor() {

this.debouncer
.debounceTime(1000)
.subscribe((val) =>{ 
console.log(val);
this.courseInstance.id=ParseInt(val,10); 
});
}
onDataChange(value) {
this.debouncer.next(value);
}

Answer 3

Angular 目前不支持属性绑定和事件绑定中的类型检查。正如你在这里看到的，他们的github中有一个悬而未决的问题： https://github.com/angular/angular/issues/16952

我建议您做的是将输入更改为类型number，并在组件中添加此css：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none; 
margin: 0; 
}

编辑：在堆栈闪电战中添加应用程序： https://stackblitz.com/edit/angular4-ngmodel-changes-type-of-data-from-number-to-string