! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Angular 템플릿에서 TypeScript Enums 사용하기 > 블로그 & Tips

본문 바로가기

Angular 템플릿에서 TypeScript Enums 사용하기

페이지 정보

작성자 GrapeCity 작성일 2020-08-05 00:00 조회 4,805회 댓글 0건

본문

Enum 은 TypeScript에서 제공하는 편리한 기능입니다. Enum을 사용하면, 많은 경우에 일반적으로 사용되는 숫자 상수 대신, 의미있는 이름을 사용하여 미리 정의된 값 집합에서 필요한 속성 값을 지정할 수 있습니다. 예를 들어, 다음 코드를 사용하여 FlexChart.chartType 속성 값을 지정할 수 있습니다.

chart.chartType = ChartType.Column;


Angular의 Enums(열거형)


그러나 Enum 유형 속성의 문제는 Angular 템플릿에서 발생합니다. Angular 템플릿에서는 해당 값을 지정하고 싶지만 지정할 수 없습니다. 유일한 방법은 열거형 멤버에 해당하는 숫자 상수를 사용하는 것입니다. 그러나, 이 방법은 불명확한 마크업을 생성하고 해당 값을 알아내는 것이 어려울 수 있습니다.


<wj-flex-chart [chartType]="2" …>


문제의 원인은 Angular 템플릿 표현식의 컴포넌트 속성을 제외하고는 어떤 것도 참조할 수 없다는 것입니다. 그러나 속성은 여전히 ​​사용할 수 있으므로 이것을 활용해볼 수 있습니다! 여기 ChartType 속성과 같이 필요한 Enum 유형에 대한 참조를 저장하는 속성을 추가할 수 있습니다.


import * as wjcChart from 'wijmo/wijmo.chart'; 
…
export class AppCmp {
    ChartType = wjcChart.ChartType;


이제 템플릿 바인딩에서 열거형 멤버를 참조 할 수 있습니다.


<wj-flex-chart [chartType]="ChartType.Column" …>


Wijmo 열거형 타입 속성


이 문제는 열거형 멤버의 문자열 이름을 속성에 할당할 수있는 Wijmo 구성 요소의 경우, 그다지 심각하지 않습니다 모든 Wijmo 열거형 유형 속성이 이러한 문자열을 실제 열거형 값으로 변환 할 수 있기 때문에, 해당 방법을 사용할 수 있습니다. 예를 들면 :


<wj-flex-chart [chartType]=" 'Column' " …>


그러나이 방법은 양방향 바인딩 시나리오의 경우 문제를 일으킬 수 있습니다. 예를 들어 가능한 차트 유형의 메뉴를 차트의 chartType 속성에 바인딩하려는 경우. "표현식이 확인된 후 변경되었습니다(Expression has changed after it was checked)"라는 예외 중 하나가 표시되거나, 선택한 메뉴 항목이 메뉴 헤더에 표시되지 않을 수 있습니다. 실제 열거형 값을 사용하는 코드에는 다음과 같은 잠재적인 문제가 없습니다.


Component:
chartType = wjcChart.ChartType.Column;

Template:
<wj-flex-chart [itemsSource]="data"
               [chartType]="chartType"
               [bindingX]="'country'"
               style="height: 200px">
    <wj-flex-chart-series [name]="'Downloads'" [binding]="'downloads'"></wj-flex-chart-series>
</wj-flex-chart>
<wj-menu [(value)]="chartType" [header]="'Chart Type'">
    <wj-menu-item [value]="ChartType.Column">Column</wj-menu-item>
    <wj-menu-item [value]="ChartType.Scatter">Scatter</wj-menu-item>
    <wj-menu-item [value]="ChartType.Line">Line</wj-menu-item>
</wj-menu>


여기에서 메뉴 항목 값은 실제 열거형 값으로 정의되고 메뉴  속성은 구성 요소의 chartType 속성을 통해 차트의 chartType 속성에 양방향 바인딩됩니다 .


Angular 템플릿의 열거형 속성


전체 작업 예제는 "여기"에서 확인 할 수 있습니다.


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.