首页 文章

Angular 5：表单字段值（字符串）和模型属性（例如数字）之间的类型转换应该在哪里发生？

提问于
浏览 次
1

我是Angular的新手，无法弄清楚，如何在表单字段值（总是字符串）和类型化的模型属性之间转换类型 .

以下组件应加倍数字 . 结果显示在控制台中 .

import { Component } from '@angular/core';

@Component({
  selector: 'app-model-view-conversion',
  template: `
    <input [(ngModel)]="aNumber" (keyup)="double()" />
  `
})
export class ModelViewConversionComponent {

  aNumber: number;

  double() {
    console.log(this.aNumber + this.aNumber); // input 7 -> 77
  }

}

TypeScript和Angular都不会在字符串和数字之间进行神奇的转换 . 所以结果当然是串联而不是加法 . 这只是为了简单的演示目的 .

The question is, where/how should the conversion happen?

我想出了类似下面的内容：

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-model-view-conversion',
  template: `
    <input [(ngModel)]="viewNumber" (keyup)="double()" />
  `
})
export class ModelViewConversionComponent implements DoCheck {

  viewNumber: string;
  modelNumber: number;

  ngDoCheck() {
    this.modelNumber = parseInt(this.viewNumber);
  }

  double() {
    console.log(this.modelNumber + this.modelNumber); // input 7 -> 14
  }

}

这有效，但并没有真正帮助 . 模型和视图必须手动保持同步 . 它们必须像转换器一样，例如JavaServer Faces .

或者模型中的getter / setter是什么？

import { Component } from '@angular/core';

@Component({
  selector: 'app-model-view-conversion',
  template: `
    <input [(ngModel)]="aNumber" (keyup)="double()" />
  `
})
export class ModelViewConversionComponent {

  num: number;
  set aNumber(numAsString) {
    this.num = parseInt(<any>numAsString);
  };
  get aNumber() {
    return this.num;
  }

  double() {
    console.log(this.num + this.num);
  }

}

这对我来说也很笨拙和冗长 . TypeScript（我也是TypeScript的新手）需要 <any> 强制转换才能很好地编译 .

任何人都可以指出我正确的方向 . 谢谢 .

angular typescript

2 回答

  • 0

    没有转换 . 类型取决于字段的 value 属性的类型 . NgModel 处理任何类型的控件，当然，它将值视为 any . 由于 input 字段用于显示文本，因此其值始终为 string 类型 . 有's no way Angular (and even less TypeScript which only knows about types at compile time) can convert between values. That'完全取决于你 .

    回复于
  • 0

    这不是什么时候，而是一个如何的问题 .

    您可以在需要时将字符串转换为数字 .

    在此特定示例中，您需要在控制台日志记录中使用它们

    试试吧

    double() {
  if (isNaN(this.modelNumber) { console.log('isNaN(' + this.modelNumber + ')'; return; }
  console.log(+this.modelNumber + +this.modelNumber);
}

    转换为数字非常简单，只需在字符串前加一个加号即可 . 在执行此操作之前，您只需测试它们是否为数字 .

    回复于

相关问题