javascript - Angular4 ngModel 将数据类型从 'number' 更改为 'string'

Question

我有一个 Angular4 应用程序，它从表单中捕获数据并将其存储在 DynamoDB 中。它使用 ngModel 来支持双向数据绑定(bind)，并且在显示上看起来都不错。由于类型为“文本”的输入字段绑定(bind)到 Typescript“数字”字段，问题开始发挥作用。似乎正在将对象值的类型更改为“字符串”。我会简单地将 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(courseInstance)的结果时；我明白了

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

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

我原以为在 Typescript 中输入会优先于 HTML“文本”输入类型。

Answer 1

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

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