Angular4 ngModel 将数据类型从“数字”更改为“字符串”答案

【问题标题】：Angular4 ngModel changes type of data from 'number' to 'string'Angular4 ngModel 将数据类型从“数字”更改为“字符串”
【发布时间】：2018-09-26 13:13:30
【问题描述】：

我有一个 Angular4 应用程序，它从表单中捕获数据并存储在 DynamoDB 中。它使用 ngModel 来支持双向数据绑定，并且在显示上看起来都很好。由于键入为 'text' 的输入字段绑定到 Typescript 'number' 字段，问题开始出现。似乎正在将对象值的类型更改为“字符串”。我只需将 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 'text' 输入类型。

【问题讨论】：

type="text" 表示字符串。改为number
请点击对您最有帮助的答案左侧的复选标记来关闭您的问题

标签： javascript angular typescript ngmodel

【解决方案1】：

把text的类型改成number变成number的类型，不要让写信。

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

【讨论】：

我解决了我不使用这种方法的愿望，因为它会使用户界面与增量/减量小工具混淆。
那么如果有人会输入文字呢？您可以使用 css 隐藏箭头

【解决方案2】：

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

我建议您将输入更改为类型编号并将此 css 添加到您的组件中：

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

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

【讨论】：

` input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;边距：0； } 输入[类型=数字] { -moz-外观：文本字段； } ` 通过此更改，此解决方案似乎确实适用于我的 Safari 和 Firefox 浏览器。不确定其他浏览器。

【解决方案3】：

[(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>

ngModel 数据属性设置元素的值属性，ngModelChange 事件属性监听元素值的变化。use parseInt 以获得所需的结果。
ngModelChange 将在每次击键时触发您需要对值进行去抖动处理，否则每次击键都会发出事件，而要对值进行去抖动处理，您可以使用 Subject 和 debounceTime() 运算符。subject 既是 observable 也是 observer。这意味着您可以将其视为可观察对象，也可以将值传递给它。除了这个使用Template reference variable

在你的组件中

    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);
        }

【讨论】：