首页 文章

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

提问于
浏览 次
1

我有一个Angular4应用程序，它从表单中捕获数据并存储在DynamoDB中 . 它使用ngModel来支持双向数据绑定，并且在显示器上看起来都很好 . 问题起作用，因为输入字段被键入为“文本”绑定到Typescript'number'字段 . 似乎是将对象值的类型更改为“string” . 我只是将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'输入类型 .

javascript angular typescript ngmodel

3 回答

  • 1

    将类型 text 更改为 number 以使类型 number 并且不允许写入字母 .

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

    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

    回复于
  • 0

    [(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 data属性设置元素的value属性， ngModelChange event属性侦听元素值的更改 . use parseInt以获得所需的结果 .
    ngModelChange 将在您需要去抖动值的每次击键时触发，否则每次按键都会发出事件 . 要去抖动值，您可以使用 Subject 和 debounceTime() 运算符.A 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);
        }
    回复于

相关问题