<select> <option value =1> number (int), string 오류 해결

문제 발생

html

<select (change)="selectGradeHandler($event)" matNativeControl required [formControl]="selectFormControl">
                <option label="-- 학년을 선택해 주세요 --"></option>
                <option value =1> 1학년 </option>
                <option value =2> 2학년 </option>
                <option value =3> 3학년 </option>
</select>

typescript

  selectGradeHandler(event: any) {
    this.grade = event.target.value;
  }

우리는 value = "1" 이라 하면 1이라는 string으로 저장이 될 터이니, value = 1 이라고 하거나 grade를 number나 int 와 같은 숫자의 형태로 선언을 했다면  하면 숫자로 저장이 될 것일고 믿었다. 그런데... 아니었다...

이렇게 한참을 개발하고 나중에 === (타입과 값을 동시에 비교하는 것) 로 비교를 했는데 숫자 타입이 아니라는 오류가 났다... 반년간 운영된 웹사이트에 이런 식으로 데이터가 쌓여오던 것이었다. 개패고싶다. 하지만 == 으로만 비교하면 되므로 일단 패스. 이 글을 읽게 되는 사람은 이러한 오류를 겪지 않았으면 한다.

해결 방법

typescript

  selectGradeHandler(event: any) {
    this.grade = parseInt(event.target.value);
  }

이렇게 parseInt를 하여 int로 변환을 해 주어야 한다... 같은 오류를 겪어 고통받지 말고 해결합시다