angular - ตัวเลขกลายเป็นสตริงโดยใช้การผูก NgModel

ฉันไม่เข้าใจพฤติกรรมนี้กับ Typescript และ Angular

my-component.html

  <ion-select [(ngModel)]="creditAmount"
              (ngModelChange)="onChangeCreditAmount()">
    <ion-option value="25" selected="true">25€</ion-option>
    <ion-option value="50">50€</ion-option>
    <ion-option value="75">75€</ion-option>
    <ion-option value="100">100€</ion-option>
  </ion-select>

my-component.ts

  creditAmount: number;

  constructor() {
    this.creditAmount = 25;
    console.log(this.creditAmount);
  }
  onChangeCreditAmount() {
    console.log(this.creditAmount);
  }

ในตัวสร้าง (constructor) creditAmount เป็นตัวเลข ในเมธอด onChangeCreditAmount มันกลายเป็นสตริง

วิธีแก้ปัญหาเดียวที่ฉันพบคือการใช้การแปลงประเภทอย่างชัดเจน: Number(this.creditAmount) แต่สิ่งนี้ดูเหมือนเป็นวิธีแก้ที่ไม่ดีสำหรับฉัน มีวิธีที่ดีกว่านี้ไหม? ขอบคุณ.

คำตอบ #1

Typescript ช่วยเฉพาะในช่วงเวลาคอมไพล์ ผลลัพธ์ยังคงเป็น JavaScript ซึ่งไม่ปลอดภัยตามประเภท ดังนั้นคุณสามารถกำหนดค่า creditAmount เป็นตัวเลข สตริง อาร์เรย์ หรืออะไรก็ตามที่คุณต้องการ

NgModel ดูเหมือนว่าจะทำงานกับสายอักขระเท่านั้น ดังนั้นคุณต้องแยกวิเคราะห์มันถ้าคุณต้องการตัวเลข ขอโทษ :-(

คำตอบ #2

อีกวิธีหนึ่งคือการใช้ตัวดำเนินการ + ด้วยวิธีดังนี้:

const str = '10';
const dig = +str;

console.log(str + ', ' + typeof str);
console.log(dig + ', ' + typeof dig);

ผลลัพธ์ :

10, string
10, number